Jump to content


Sprite sheet animated by slider

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I would like to control a video frame by frame via a slider. As It is a short video, my idea was to embed it in a sprite sheet and then move it along a slider.

My Sprite sheet is 11*10 and the size of each 300x250.

I found this great CodePen: 

Which basically do what I am looking for (just need to add a slider rather than a mouse drag and it is all good)

However, The sprite sheet used was on 1 line only and I cannot do that as I would end up with a 31000px jpeg, which I guess is not good.

How can I modify the code pen to force the sprite to go to the line every 10*300px?

Sorry if it is a little bit confusing, I am not familiar with JS, I just want to show the front end, the type of animation I am looking for.



See the Pen Cvidl by astrogastro (@astrogastro) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Here is a basic example of using a grid-based spritesheet with rows and columns




The firs example in this demo: http://codepen.io/jamiejefferson/pen/aJcGl toggles the visibility of separate images. Might be worth looking into if you don't every frame in one big massive image.

  • Like 2
Link to comment
Share on other sites

This is awesome, Thanks you very much Carl

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.