2 questions, using reverse + onComplete play timeline

[galactus]

Just discovered timelineLite and have a couple question that may be obvious.

 

1. I have a timelineLite with several tweens which I want to reverse after the last tween in the sequence. While i could use the onComplete to trigger the reverse, I would like to be able to use onReverseComplete to trigger another timeline to play. Perhaps there is a way better way to do this as well.

 

2. related to first question, can you have a paused timeline which is triggered to play using the onComplete. But not using a function to do so?

i tried onComplete:myTimeline.play() with no success.

 

Greensock rocks by the way.

[GreenSock]

1. I have a timelineLite with several tweens which I want to reverse after the last tween in the sequence. While i could use the onComplete to trigger the reverse, I would like to be able to use onReverseComplete to trigger another timeline to play. Perhaps there is a way better way to do this as well.

 

The best (and easiest) way to accomplish this is to use TimelineMax instead of TimelineLite. It is EXACTLY the same thing but it has some extra features. In this case, you'd want to use the "repeat" and "yoyo" special properties. So to have a group of tweens run forwards, then backwards, then forwards again and stop, you'd do:

 

var tl:TimelineMax = new TimelineMax({repeat:2, yoyo:true});
tl.append( ...your tween... );
tl.append( ...your tween... );

 

This makes it very easy and quite powerful because you can also define an onComplete which will only get called after all the repeating/yoyo-ing has finished.

 

2. related to first question, can you have a paused timeline which is triggered to play using the onComplete. But not using a function to do so?

i tried onComplete:myTimeline.play() with no success.

 

Sure, you just used the wrong syntax. whenever you put a "()" after a function, it tells Flash to immediately run that function and swap the result in for that line. So just remove the "()" and you should be fine.

[galactus]

Thanks for responding...

 

I think I understand the idea behind what you suggested, but maybe I need some additional help with syntax? (in AS2)

 

here is my actionscript. (note that the MCs I am tweening start with alpha 0)

 

 

var timeline1:TimelineLite = new TimelineMax({repeat:1, yoyo:true});

 

timeline1.append(new TweenLite(cartimeline2, .25, {_alpha:100, ease:Sine.easeIn}),2);

timeline1.append(new TweenLite(cart3, .25, {_alpha:100, ease:Sine.easeIn}));

timeline1.append(new TweenLite(cart4, .25, {_alpha:100, ease:Sine.easeIn}));

timeline1.append(new TweenLite(cart5, .25, {_alpha:100, ease:Sine.easeIn}));

timeline1.append(new TweenLite(cart6, .25, {_alpha:100, ease:Sine.easeIn}));

timeline1.append(new TweenLite(cart7, .25, {_alpha:100, ease:Sine.easeIn}));

timeline1.append(new TweenLite(cart8, .25, {_alpha:100, ease:Sine.easeIn, onComplete:timeline2.play}));

 

// I would like timeline2 to be paused and be triggered when timeline1 is complete but when I test, timeline2 plays immediateley.

 

var timeline2:TimelineLite = new TimelineMax();

timeline2.stop();

timeline2.append(new TweenLite(seq2cartimeline1, .25, {_alpha:100, ease:Sine.easeIn}),0.5);

timeline2.append(new TweenLite(seq2cartimeline2, .25, {_alpha:100, ease:Sine.easeIn}));

timeline2.append(new TweenLite(seq2cart3, .25, {_alpha:100, ease:Sine.easeIn}));

timeline2.append(new TweenLite(seq2cart4, .25, {_alpha:100, ease:Sine.easeIn}));

timeline2.append(new TweenLite(seq2cart5, .25, {_alpha:100, ease:Sine.easeIn}));

timeline2.append(new TweenLite(seq2cart6, .25, {_alpha:100, ease:Sine.easeIn}));

timeline2.append(new TweenLite(seq2cart7, .25, {_alpha:100, ease:Sine.easeIn}));

 

///////////////////////////////////////////////////////

// I intially tried using TimelineLite as below:

 

var timeline1:TimelineLite = new TimelineLite({onReverseComplete:timeline2.play});

 

timeline1.append(new TweenLite(cartimeline2, .25, {_alpha:100, ease:Sine.easeIn}),2);

timeline1.append(new TweenLite(cart3, .25, {_alpha:100, ease:Sine.easeIn}));

timeline1.append(new TweenLite(cart4, .25, {_alpha:100, ease:Sine.easeIn}));

timeline1.append(new TweenLite(cart5, .25, {_alpha:100, ease:Sine.easeIn}));

timeline1.append(new TweenLite(cart6, .25, {_alpha:100, ease:Sine.easeIn}));

timeline1.append(new TweenLite(cart7, .25, {_alpha:100, ease:Sine.easeIn}));

timeline1.append(new TweenLite(cart8, .25, {_alpha:100, ease:Sine.easeIn, onComplete:timeline1.reverse}));

 

 

var timeline2:TimelineLite = new TimelineLite();

timeline2.stop();

timeline2.append(new TweenLite(seq2cartimeline1, .25, {_alpha:100, ease:Sine.easeIn}),0.5);

timeline2.append(new TweenLite(seq2cartimeline2, .25, {_alpha:100, ease:Sine.easeIn}));

timeline2.append(new TweenLite(seq2cart3, .25, {_alpha:100, ease:Sine.easeIn}));

timeline2.append(new TweenLite(seq2cart4, .25, {_alpha:100, ease:Sine.easeIn}));

timeline2.append(new TweenLite(seq2cart5, .25, {_alpha:100, ease:Sine.easeIn}));

timeline2.append(new TweenLite(seq2cart6, .25, {_alpha:100, ease:Sine.easeIn}));

timeline2.append(new TweenLite(seq2cart7, .25, {_alpha:100, ease:Sine.easeIn}));

[GreenSock]

The problem is that you're referencing timeline2 before it's created!

 

var timeline1:TimelineMax = new TimelineMax({repeat:1, yoyo:true});
var timeline2:TimelineMax = new TimelineMax();

timeline1.append( ... );
timeline1.append(new TweenLite(cart8, .25, {_alpha:100, ease:Sine.easeIn, onComplete:timeline2.play}));

timeline2.stop();
timeline2.append( ... );