Jump to content
GreenSock

erikb

animating steps

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

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?

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

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.
Link to comment
Share on other sites

Hi;

 

Anyway, here is the new pen:

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

  :) I hope it is working for you

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

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

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

 

See the Pen zrGGmQ by jonathan (@jonathan) 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.
×