Sprite animation based on frame numbers

[Gardi 3 Likes (Newbie)]

Hi

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
{repeat:-1, 
backgroundPosition: "-150px", //width of each frame and directon of the animation
ease:Linear.easeNone, 
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

[Diaco 1,948 Likes (Superhero)]

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

[Gardi 3 Likes (Newbie)]

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?!)


 

[Diaco 1,948 Likes (Superhero)]

pls check my previous answer again , you can simply use timeline to make your scenario tween sequences .

[Gardi 3 Likes (Newbie)]

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