Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
d4rklit3

Change Easing on Timeline Tweens without remaking the timeline

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

I am trying to make it so that I can change the ease type on the contained tweens of a timeline without remaking the timeline to do so. Is this possible?

Link to comment
Share on other sites

Technically, you could loop through the children and use the updateTo() method in TweenMax (that assumes all your tweens in the timeline are TweenMax instances, not TweenLite), but changing an ease after the tween was created is generally not a good idea because there's no good way to smoothly handle the transition. In other words, if the tween has started, you'd see a jump to the new position based on the new ease. 

 

Do you mind me asking why you'd want to do this? In all my years doing this, I can't remember anyone requesting this, nor have I ever needed it (not that it's "wrong" or anything - just curious).

Link to comment
Share on other sites

Hi,

 

If all the timeline's tweens nave the same ease function you could populate your timeline through a function and pass the ease var as an argument.

 

Another possibility would be to put tweens with linear.easeNone and use the tweenFromTo method, which accepts callbacks and ease functions. But in this case you'll have to create as many of this instances as tweens your timeline has, unless you're aiming to reproduce just part of the timeline.

 

As you'll see there's no easy way to do this and as Jack said it would be interesting to know what's your scenario to find the best way to do it.

 

Cheers

Rodrigo.

Link to comment
Share on other sites

Jack,

the reason I want to do this is because I have an animation which is stepped. If the user goes step to step I want there to be easing (Cubic.easeInOut), but if the user decides to skip to a particular part i want it to look smoother (linear.easeNone)

Link to comment
Share on other sites

What do you mean by "stepped"? If I'm visualizing it correctly, Rodrigo's suggestion might be exactly what you need - just build everything with Linear.easeNone and place a label at each "step" and then use TimelineMax's tweenTo() method to jump to any step and apply whatever easing you want. Like:

yourTimeline.tweenTo("step3", {ease:Cubic.easeInOut});

There's a ton of flexibility and it would perform better than trying to go in and swap out eases in each tween.

Link to comment
Share on other sites

And by the way, if you want the transition between steps to always last the same amount of time, you can just create your own tween of the timeline's "time" (which is basically what the TimelineMax.tweenTo() method does) like this:

yourTimeline.pause();
TweenLite.to(yourTimeline, 1, {time:yourTimeline.getLabelTime("step3"), ease:Cubic.easeInOut});
Link to comment
Share on other sites

Yeah, Rodrigo's method worked perfectly. Thanks guys!

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