Change Easing for Timeline-Reverse

[rob83]

Hi,

 

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,

Rob

[Rodrigo]

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

tl
.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});
tn1.play(0);

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

tn1.updateTo({ease:Elastic.easeIn});
tn1.play(0);

 
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,
Cheers,
Rodrigo.

[rob83]

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!

 

Cheers,

Robert

[anthonygreco]

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/

[Carl]

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

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/tweenTo/

 

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


tween.progress(0.5).pause()


$("#update").click(function() {
  tween.resume();
  tween.updateTo({ease:Power4.easeOut})
})

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/

[anthonygreco]

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!

[Carl]

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

  .to()

  .to() 

  .to()

  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.

[determin1st]

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