Jump to content
GreenSock

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

Change Easing for Timeline-Reverse

Recommended Posts

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

Share this post


Link to post
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});

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
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

 

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/

  • Like 3

Share this post


Link to post
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

Share this post


Link to post
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();

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

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×