Jump to content


Change Easing for Timeline-Reverse

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



is there a way to change the easing method of a tween in a timeline when reversing the timeline?

My example.:

var tlDrops = new TimelineMax({paused:true, delay:2, reversed:true});
tlDrops.from("#geschenkedrops", 0.2, {bottom:0, right:15, ease:Back.easeOut}, "starting")
.to("#geschenk", 0.5, {autoAlpha:0}, "-0.1")
.to("#merci-button", 0.5, {autoAlpha:1}, "-0.1")
.from("#hauptgeschenk", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:180, ease:Elastic.easeOut}, "geschenke")
.from("#geschenk2", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:160, ease:Elastic.easeOut}, "geschenke")
.from("#geschenk3", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:140, ease:Elastic.easeOut}, "geschenke")
.from("#close-button", 0.2, {bottom:25, right:25, ease:Sine.easeOut})
.to("#geschenkedrops", 0, {autoAlpha:1}, "closing");

Now I would like to change all Elastic.easeOut easing methods into a different method (e.g. sine.easeIn) on timeline reverse. Is that possible, or do I need to create an extra timeline for the reverse function?


Thanks so much,


Link to comment
Share on other sites

Hi Rob,
One way could be to use the updateTo method; the only constraint is that you'll have to create the individual tweens as variables and include them in your parent timeline via the add method, like this:

var tl = new TimelineLite(),
tn1 = new TweenLite.to(element, time, {vars, ease:Elastic.easeOut}),
tn2 = new TweenLite.to(element, time, {vars, ease:Elastic.easeOut});

.add(tn1, 'label1')
.add(tn2, 'label2');

You can see a working sample here:

See the Pen yqCea by rhernando (@rhernando) on CodePen

The one thing I couldn't achieve is to reverse the tween to it's original ease function which is why I had to do this:

tn1 = new TweenMax.to(div1, 1.5, {top:350, left:350, ease:Elastic.easeOut});

in the function that plays the tween, because if the code is as follows:


I had to click the button twice to get it back to the elastic ease function. The good thing is that you could use the method through a callback in your timeline so it would work, it wouldn't look pretty but it'll work.
Hope this helps,

Link to comment
Share on other sites

  • 2 weeks later...

Hey Rodrigo,

sorry for the late reply and thanks for the great help. I tried your solution it and initially it didn't work but I guess it's due to how I created my timeline. I use the "from" method and the timeline is initially set to it's reversed status. So I first have to change the playing order. I think it should work then.


So thanks agian!




Link to comment
Share on other sites

  • 1 year later...

Is there a way to update the ease on a timeline? As opposed to the ease on a Tween? Or does this need to be rebuilt in a different fashion? Basically, I'm looking to create a timeline for several elements on the page, and since I needed to update the eases on those timelines, I placed my timelines in an array that I can retrieve later for updating. Will I need to create another array of tweens and target them instead? Can I access a tween inside a timeline and alter it's eases from just the timeline perhaps? Any thoughts on how I should address this? http://jsfiddle.net/anthonygreco/on11v708/

Link to comment
Share on other sites

Hi Anthony,


The API doesn't support applying an ease to a timeline. 

However you can get that effect by using TimelineMax's tweenTo() with an ease


Take a look at this: http://codepen.io/GreenSock/pen/wBVPaz?editors=001




Changing the eases on tweens is possible but I advise against it, as it is a bit clunky and not smooth.


Consider the following example


var tween = TweenMax.to(".box", 2, {left:500, ease:Linear.easeNone})


$("#update").click(function() {

The tween has to travel a distance of 500px and has a Linear ease.

When we pause it at progress(0.5) the box it is halfway through its tween and its x is 250px.


But when you update the ease to a Power4.easeOut, that is going to naturally affect the rate of change, and at the same progress(0.5) the box is going to jump to somewhere very close to 500.


See it in action: http://codepen.io/GreenSock/pen/fc6a65d9561c3f78aab5bb54309f07a0/

  • Like 3
Link to comment
Share on other sites

That makes complete sense. Let me ask you this though, is the only concern relative to changing the ease in the middle of an animation vs changing the ease onComplete and onReverseComplete to just "toggle" between two different eases based on direction of the timeline? Or should I instead, consider trying to rebuild the timeline using labels or something and playing from one label to another? (I actually need to go reread the docs and take a look at some codepen examples as I haven't used labels much if that sounds like the right way to go about this)


Thanks Carl!

  • Like 1
Link to comment
Share on other sites

If you are only changing the ease at the beginning or end and don't need to worry about the jump I illustrated, then I don't think updating the eases on the tweens is bad. 


A general rule that I prefer to follow is that if I need a timeline to behave differently going forward than in reverse, I will use a separate timeline for that and sometimes dynamically spit one out on the fly.


function getReverseTimeline() {

  var tl = new TimelineLite();




  return tl;





I'd say play around with what makes sense to you for a bit and let us know if you get stuck somewhere. 

I just have a hard time recommending the best solution without understanding all the moving parts properly.

It sounds to me like you have a good understanding of what needs to be done.

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

suppose, it would be much safer to change ease IF there were onReverse event..

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.