Changing ease on the fly

[omnider]

Hi, I'm having difficulties changing an ease of TweenMax on the fly. I have a Timeline (TimeLineMax) with three TweenMax instances in it. I need to change ease of the middle one when I reverse the timeline. I tried various things but nothing worked(like updateTo, which resets the tween so it's no use). Is there any easy way to do it? Any ideas would by highly appreciated.

 

cheers

[Carl]

interesting issue you have there.

 

I tried to test this scenario and came up with the following results:

 

If the tween you are updating is the last tween in the TimelineMax, then the ease gets changed and the tween plays backwards fine.

 

If the tween you are updating is NOT the last tween int the TimelineMax the tween does not appear to work as it seems that other starting and end values are ignored.

 

Here is my test code (CS4 Fla attached)

import com.greensock.*;
import com.greensock.easing.*;

var tl:TimelineMax = new TimelineMax({paused:true, repeat:1, yoyo:true, onRepeat:changeEase});

tl.append(TweenMax.to(mc, 1, {x:300}));
tl.append(TweenMax.to(mc, 1, {y:300, ease:Bounce.easeOut}));

//if the following tween is added. it appears the update will not work and the 2nd tween will not reverse
//no visible change in y value

//tl.append(TweenMax.to(mc, 1, {alpha:0}));


stage.addEventListener(MouseEvent.CLICK, test)

function test(e:Event):void{
tl.play();
}

function changeEase(){
//reference the second tween in the timeline	
  var myTween:TweenMax = tl.getChildren()[1]

  myTween.updateTo({ease:Linear.easeNone});

}	

 

this timeline moves the mc to the right, then down, then fade out.

if the fade out (third tween) is removed I am able to remove the bouce on the 2nd tween (move down).

 

Perhaps this additional information will help someone else quickly diagnose or explain this behavior.

In the meantime I will see what I can come up with.

 

Carl

[omnider]

Hi Carl, thanks for the effort you put into trying this. The thing with updateTo is, it resets the tween, because it's designed to create a seamless transition when changing attributes "on the fly". Obviously this is not the route to go when trying to change attributes on reverse ... or any tween you instance and use more than once for that matter (if I understand the concept of updateTo correctly). I was kind of hoping to find a workaround, which I actually did in my case by creating new instances of the timeline each time I want to reverse ... but there is a lot of checks involved and generally this solution doesn't seem clean to me. So I am still quite curious if there is a way to do it nicely

[Carl]

thanks for the clarity on onUpdate.

 

I was going to suggest having a function that re-creates the entire timeline, but was hoping too that there was a simpler way:)

[GreenSock]

...The thing with updateTo is, it resets the tween, because it's designed to create a seamless transition when changing attributes "on the fly". Obviously this is not the route to go when trying to change attributes on reverse...

Exactly. updateTo() is designed to do a seamless change on-the-fly during a tween (or before it begins). However, I just updated TweenMax's updateTo() method so that it will better accommodate finished tweens. That's not to say I'd recommend using it in this scenario - I'd probably build two separate timelines that run back-to-back. That way you could have distinct tweens instead of trying to keep swapping out the ease. Just an idea. According to my tests with the new updateTo(), it could work too.

[omnider]

cheers, I'll give it a go with the new updateTo

[LukasLt]

Since your topic is high in google I'm crossposting a link to my workaround:

 

http://forums.greensock.com/topic/7909-change-easing-on-demand/#entry30284

 

Not perfect, I have no idea how this would work in Flash, but I hope it helps someone