Timeline restart problem

[dentaku]

Hi,

I have a hard time understanding a TimelineLite.restart() behaviour (see my sample code and the links below).

The problem is: if a certain tween delay is 0 or a positive number, then the animation sequence is OK, it looks the same forever. If it's negative, and the timeline restarts then there will be a jump in the animation at the *marked tween.

How can I fix the grey box animation? How should I reinitialize the timeline or the tweens, or the object properties?

 

Thanks for helping!

d

 

Sample animation: http://www.dentaku.hu/as/timeline-restart_test.html

The .fla with source code: http://www.dentaku.hu/as/timeline-restart_test.zip

 

// Imports
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([AutoAlphaPlugin, VisiblePlugin]);


// Tween durations

var durNorm:Number = .6;
var durNeg:Number = -.1;// if this is 0 or a positive number, then the animation sequence looks the same forever. If it's negative and after the timeline restarts there is a jump in the animation at the *marked tween


// Story

var tMain:TimelineLite = new TimelineLite();
tMain.append(TweenLite.from(box1, durNorm, {autoAlpha:0}),0);
tMain.append(TweenLite.from(box2, durNorm, {autoAlpha:0}),durNeg);
tMain.append(TweenLite.from(boxGrey, durNorm, {autoAlpha:0}),durNeg);
tMain.append(TweenLite.from(boxGrey, durNorm, {_y:"50"}),durNeg);

tMain.append(TweenLite.from(box4, durNorm, {autoAlpha:0}),durNeg);
tMain.append(TweenLite.to(boxGrey, durNorm, {_y:"50"}),durNeg);//*marked
tMain.append(TweenLite.to(boxGrey, durNorm, {_y:"50"}),durNeg);

tMain.append(TweenLite.to(box1, durNorm, {autoAlpha:0}),durNeg);
tMain.append(TweenLite.to(box2, durNorm, {autoAlpha:0}),durNeg);
tMain.append(TweenLite.to(boxGrey, durNorm, {autoAlpha:0, onComplete:re}),durNeg);
tMain.append(TweenLite.to(box4, durNorm, {autoAlpha:0}),durNeg);
var tMainEnd:Number = tMain.duration;

// Functions
function re() {
tMain.gotoAndPlay(0);
}

[GreenSock]

The problem has to do with these two lines:

 

tMain.append(TweenLite.to(boxGrey, durNorm, {_y:"50"}), durNeg);
tMain.append(TweenLite.to(boxGrey, durNorm, {_y:"50"}), durNeg);

 

When durNeg is negative, that second tween begins BEFORE the previous one finishes. Remember, when the tweening engine encounters an overlap in tweens where the SAME property of the SAME object is being tweened at the SAME time, the new (second) one will overwrite the first one in order to avoid conflicts. Otherwise you'll have two tweens fighting to control the same property of the same object. When a tween is overwritten, it doesn't come back later - it stays overwritten. So in your case, the first time the overlap is encountered (the first time through), the first tween gets overwritten. That's why you're not seeing it play later. You should either make sure you don't create overlaps like this or set overwrite:false on that second tween but I'd caution you about that: usually it's a bad idea to allow overlaps.

[dentaku]

When a tween is overwritten, it doesn't come back later - it stays overwritten.

 

Now the whole thing suddenly became dead simple and crystal clear. Thank you for your brilliant explanation, this one bugged me since I started to work with Timeline(s)!

 

m(__)m