Change ease function for timeline.reverse()

[peterPotter]

I have a normal TimelineMax animation with ease:Expo.easeOut, I simply want to use the same ease:Expo.easeOut when reversing the timeline. I noticed that when the timeline is reversing, it is doing the opposite easing, so since I have Expo.easeOut for the forward timeline, it is automatically doing ease:Expo.EaseIn. I don't want the ease:Expo.easeIn at all, I want to do Expo.easeOut for both the forward and reverse timeline animation.

 

Thanks.

[GreenSock]

Sure, you can do that but it's not a true reverse then. You'd need to set up two tweens back-to-back (one for the forward motion and one for the backward motion). It's easy with TimelineLite or TimelineMax.

 

var t:TimelineLite = new TimelineLite();
t.append( new TweenMax(mc, 1, {x:100, ease:Expo.easeOut}) );
t.append( new TweenMax(mc, 1, {x:mc.x, ease:Expo.easeOut}) );

 

Then you can control the entire things as a whole since it's in a TimelineLite (restart(), play(), pause(), resume(), reverse(), etc.)

[peterPotter]

Thanks, but how exactly do I play just the first (forward) part? And then just the reverse part?

 

Here is my code:

myTweens = new Array ();
myTweens.push (TweenMax.to(myClip_1, tweenSpeed, {x:startingXLoc, y:YLoc, scaleX:scaleAmt, scaleY:scaleAmt, ease:Expo.easeOut}));
	myTweens.push (TweenMax.to(myClip_2, tweenSpeed, {x:startingXLoc, y:YLoc, scaleX:scaleAmt, scaleY:scaleAmt, ease:Expo.easeOut}));

timelineThumbSeq = new TimelineMax({tweens:myTweens, repeat:0, yoyo:false, repeatDelay:0, align:TweenAlign.START, stagger:0.05, onComplete:pauseBeforeGridChange});
// This is my reverse code:
timelineThumbSeq.reverse();

 

I am not sure how to do that with the example you provided.

[GreenSock]

You could accomplish this a few different ways, but this is probably the easiest:

 

var thumbSeq:TimelineLite = new TimelineMax({paused:true});
thumbSeq.append( TweenMax.to(myClip_1, tweenSpeed, {x:startingXLoc, y:YLoc, scaleX:scaleAmt, scaleY:scaleAmt, ease:Linear.easeNone}) );
thumbSeq.append( TweenMax.to(myClip_2, tweenSpeed, {x:startingXLoc, y:YLoc, scaleX:scaleAmt, scaleY:scaleAmt, ease:Linear.easeNone}) );

//then to play forwards, tween the currentTime of your thumbSeq. TimelineMax's tweenTo() makes it easy:
thumbSeq.tweenTo(thumbSeq.duration, {ease:Expo.easeOut});

//and to reverse with a different ease, do the same thing in the other direction (back to zero):
thumbSeq.tweenTo(0, {ease:Expo.easeOut});

 

Notice I used Linear.easeNone in the tweens themselves.

[peterPotter]

I tried your last suggestion, but now my tween is not as sexy anymore, it appears I lost the easing on "forward" and a couple features:

 

1. When tweeining "forward," I don't get the easing at all:

timelineThumbSeq.tweenTo(timelineThumbSeq.duration, {ease:Expo.easeOut});

2. I don't have the option for the staggered (0.05) start time

3. I lost the eventListenersm like onComplete and TweenEvent.REVERSE_COMPLETE:

timelineThumbSeq.addEventListener (TweenEvent.REVERSE_COMPLETE, goAdd);

 

I simply tried the following to get the complete for both the forwards and reverse (well, not exactly "reverse" but tween to 0), but to no avail:

timelineThumbSeq.addEventListener (TweenEvent.COMPLETE, reAdd)

;

 

4. Is there a reason you set paused:true?

5. On the reverse, timelineThumbSeq.tweenTo(0, {ease:Expo.easeOut}), only the last TweenMax tween is easinng, the others before the last appended one are not easing.

[GreenSock]

Yeah, it was applying the ease to the entire animation, not each tween. I understand what you're going for now. It's actually pretty much impossible to accomplish the way you were attacking it (with one static TimelineLite forwards and one backwards) because if you're changing the easing, it shifts the positions of the objects at the corresponding time. That's not a problem with TweenLite/Max/TimelineLite/Max - it's just a logic issue. I'm sure you don't want your objects to jump when reversing them mid-tween. So the only solution is to recreate the tweens when you need them so that their starting positions are respected. Here's a simplified example that tweens mc1, mc2, and mc3 to a y position of 0 over 1 second each (and staggers them by 0.5 seconds):

 

var clips:Array = 	[mc1, 	mc2, 	mc3];
var yStart:Array = 	[mc1.y, mc2.y,	mc3.y];
var yEnd:Array = 	[0, 	0,		0];
var sequence:TimelineLite;

button_mc.addEventListener(MouseEvent.ROLL_OVER, rollOver);
button_mc.addEventListener(MouseEvent.ROLL_OUT, rollOut);
function rollOver(event:MouseEvent):void {
if (sequence != null) {
	sequence.kill();
}
sequence = new TimelineLite();
var delay:Number = 0;
for (var i:int = 0; i 		if (clips[i].y != yEnd[i]) {
		sequence.insert( new TweenMax(clips[i], 1, {y:yEnd[i], ease:Expo.easeOut}), delay);
		delay += 0.5;
	}
}
}

function rollOut(event:MouseEvent):void {
sequence.kill();
sequence = new TimelineLite();
var delay:Number = 0;
var i:int = clips.length;
while (i--) {
	if (clips[i].y != yStart[i]) {
		sequence.insert( new TweenMax(clips[i], 1, {y:yStart[i], ease:Expo.easeOut}), delay);
		delay += 0.5;
	}
}
}

 

There are many ways you could handle the data and this could be optimized a bit more, but hopefully you get the idea. You should be able to take this and run with the concept, but let us know if you run into trouble.

[el_chapiro]

Hi there!!

this topic was very useful for me.

Now I try to use

KeyboardEvent.KEY_DOWN

and

KeyboardEvent.KEY_UP to control

How Do I need to do?

Thank you in advance.

[Carl]

Hi, not exactly sure what you need.

 

This tutorial here does a great job of explaining how Keyboard events work:

http://www.kirupa.com/developer/as3/using_keyboard_as3.htm

 

If you need more help please supply a very simple fla with a clear explanation of what needs fixing.

[el_chapiro]

Hi!

thanks for your answer.

I try to be as clear as possible: 

I want to control the rotation of a pointer  just like the ones you can find on a speedometer using the keyboard .

While I press the up arrow key the indicator rotate its position and should not exceed 270 degrees. 

When I stop pressing the up arrow key, this indicator returns to the original position (zero degrees), and it needs to go back slowly.

 

EDITED

Hi! I worked out! using DirectionalRotation Plugin, your code example above and the tutorial for KeyboardEvents!!

Here's a .fla file with an example of how I used for a single MC

 

Thanks for your time!!