animating steps

[erikb 28 Likes (Newbie)]

How would I use greensock js to animate an effect like the one described herein:

 

http://stackoverflow.com/questions/1736922/how-to-show-animated-image-from-png-image-using-javascript-like-gmail

 

My best guess is to tween the value between 0 to 1 of a vanilla javascript object, and onUpdate to do the math to change the css background position to the closest "step".  This way I could use any of the easing functions too.

 

But I am wondering if there is a better way?

 

[Chrysto 143 Likes (Specialist)]

Sure, you can configure  SteppedEase easing ( http://api.greensock.com/js/com/greensock/easing/SteppedEase.html

 

 ) . Here is a pen :

See the Pen FfeAa by burnandbass (@burnandbass) on CodePen

[erikb 28 Likes (Newbie)]

Thanks Bassta

 

This is what I was looking for, but seems to be missing a feature --  it is only linear.  How would I use one of the other eases?

[Chrysto 143 Likes (Specialist)]

Hi;

 

I thought this was the effect you tried to achieve. If you want to "tween" the sequence ( the first frames show faster, the middle stays more etc.) you need a function that calculates the background position and runs on onUpdate() method. I'll try to create you a new pen with this technique later today  

[erikb 28 Likes (Newbie)]

Bassta -- not to worry, that is the solution I've already implemented.  I was hoping there was something like the SteppedEase where you could pass another ease in as a parameter.

[Chrysto 143 Likes (Specialist)]

Hi;

 

Anyway, here is the new pen:

See the Pen qAhpj by burnandbass (@burnandbass) on CodePen

  I hope it is working for you

[jamiejefferson 1,185 Likes (Superhero)]

That's a good idea bassta, but I'll offer one more option:

See the Pen igHft by jamiejefferson (@jamiejefferson) on CodePen

 

One of the really powerful features of GSAP is that you can actually tween the progress (or time) of a linear tween to apply any easing you like to it:

var smiley = TweenMax.to("#smile", 1, {
  backgroundPosition:"0px -574px",
  ease:SteppedEase.config(41),
  paused:true
});
TweenMax.to(smiley, 3, { progress:1, repeat:-1, ease:Power4.easeInOut });

[Chrysto 143 Likes (Specialist)]

var smiley = TweenMax.to("#smile", 1, {
  backgroundPosition:"0px -574px",
  ease:SteppedEase.config(41),
  paused:true
});
TweenMax.to(smiley, 3, { progress:1, repeat:-1, ease:Power4.easeInOut });

 

Very useful, Jamie! Really clean approach!

[Bricks4ever 0 Likes (Newbie)]

I know this post is rather old... but anyway the smiley link used in the pens are dead... any chance that you could update the pens?

[kez1304 7 Likes (Newbie)]

I know this post is rather old... but anyway the smiley link used in the pens are dead... any chance that you could update the pens?

 

You can use the image:

 

http://ssl.gstatic.com/ui/v1/icons/mail/im/emotisprites/wink2.png

 

Instead, just change it in the background.

[Jonathan 5,176 Likes (Superhero)]

Here is a working example of animating a background-image spritesheet using GSAP.

 

See the Pen zrGGmQ by jonathan (@jonathan) on CodePen