Jump to content


Sprite animation that combines multiple jpg files

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 have a frame by frame (sprite) animation that I am trying to create that has a total of 24 frames, but because it's rather large (as far as width/height) I have to break it up into multiple files so it doesn't exceed some mobile devices max widths.


I am just trying to make one sprite sheet play, using the SteppedEase functionality, then hide that div, show the next, etc.


For some reason the image is not playing out as it should when combined with the multiple sprite sheets, but it does play correctly when it's by itself. I created this in codepen, so hopefully it's pretty clear. (I also included the 3 image files that are part of the animation so the overall movement is pretty clear).


Any help would be greatly appreciated.

And, if there is a way to preload the images somehow, that would be super helpful as well.


Thanks very much in advance,




See the Pen eWGbaP by jvolvovski (@jvolvovski) on CodePen

Link to comment
Share on other sites

You have problems with your timeline labels...

var alsoAnimation = new TimelineMax({repeat:-1})
.to('.also-01', dur, {backgroundPosition: -SpriteWidth+'px', ease:SteppedEase.config(totalFrames)}, "sprite1")
.set('.also-01', {display: "none"}, "sprite1")


You're setting it to display: "none" at the same time you are trying to animate it. Get rid of them and you should be good.


See the Pen KmZzyR?editors=1010 by osublake (@osublake) on CodePen


And here's a good thread about sprite sheets. 


  • Like 3
Link to comment
Share on other sites

Thanks so much! Really appreciate your response.


Can you also explain why you changed the total frames to "-1" and the SpriteWidth to "-917"?

var fps = 8 , // frame rate per second
    totalFrames = 8 - 1, // your Sprite animation frames counts
    dur = (1/fps)*(totalFrames-1) , // tween duration
    SpriteWidth = 7336 - 917; // width of your Sprite image


And, is there a way to preload images with GSAP?


Link to comment
Share on other sites

I made those adjustments because it's already showing the first frame, so there are only 7 frames to animate to. The 917 value is the width of each frame, so I subtracted that from the total width.


GSAP doesn't provide a way to preload images, but here's an example of how you can do that. Once an image is preloaded, you can use the url anywhere as it will be cached.


See the Pen aWEyzy by osublake (@osublake) on CodePen


  • Like 1
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.