Jump to content
Search Community

animating steps

erikb test
Moderator Tag

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

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?

 

Link to comment
Share on other sites

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 ;) 

Link to comment
Share on other sites

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 });
  • Like 7
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 2 years later...
Guest Bricks4ever

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?

Link to comment
Share on other sites

  • 5 months later...

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...