Jump to content
Search Community

Sprite animation based on frame numbers

Gardi test
Moderator Tag

Go to solution Solved by Diaco,

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


Diaco gave an example which provides code for sprite animation like the following

TweenMax.to('.character',1,{repeat:-1,backgroundPosition: "-2400px",ease:SteppedEase.config(16)});

I can use this code for my sprite animation but It  would much easier for me if I can set frame rate to a stable number (like 15 fps) and simply write the frame number and the dimension of the frame (like the below example code). I've searched and found jamiejefferson has written a code where I can set a frame rate but I couldnt managed to combine them.

var images = $('.character')(), // name of the class
fps = 15, //frame rate
duration = 1 / fps;

TweenMax.to(images, 16, //number of frames in this image
backgroundPosition: "-150px", //width of each frame and directon of the animation
useFrames:true}, duration, duration);

This does not work.

Anyway. I would apriciate any lead and help on the matter.

See the Pen wGBxwV by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Gardi  :)


if i understood correctly , you can use timeScale() , but i think that's better to use something like this :


var fps = 30 , framesCount = 16 , dur = (1/fps)*(framesCount-1) ;
TweenMax.to('.character',dur,{repeat:-1,backgroundPosition: "-2400px",ease:SteppedEase.config(framesCount)});

See the Pen RaNEjG by MAW (@MAW) on CodePen

  • Like 6
Link to comment
Share on other sites

Hi Diaco.

It works. Thank you. And looks really simple (doh). How ever now I got another problem.  This sprite animation is one of many that are continuing each other, like one after another.

I've modified the code (at codepen example) a bit by adding background-repeat none (since its not a looping animation) and added another div with another class, which suppose to start animating right after the first one.

In the updated codepen - now the animations are blinking in repeating and also in starting one after another. (I'm suspecting that -2400 is overshooting it. there fore 15 frame count and 2250 would make a smooth repeat. BUT transitioning from one sprite to another is not as smooth).


Is there a way to start animations right after another without using delays? (So I wont have to calculate how long the previous animation was everytime?!)


Link to comment
Share on other sites

Hey thanks a lot. Timeline feature is awesome. I was stuck in a simmilar space in my previous attempt and timeline (especially timelinemax ) is a great solution for my problems.

I've tried to implement the answers that you've provided but still has some minor problems. I guess I'll not beat around the bush and just provide the glimps of the problem. Please check this example.

See the Pen yOyZqN by anon (@anon) on CodePen

As you can see, there are some sprites with different total frames. Thats why I have 2 (and actually many more needed later on) type of duration in the example. Also for now I'm trying to do all my animation in one divs background. That way, I'll be keeping it clean on html part.

After playing around I've managed it. Thank you very much

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.
  • Create New...