TimelineLite tweens with no duration not working as intended

[shoey]

Hello community,

 

I'm using TimelineLite, which is amazing, but I'm having issues with tweens that have no duration. I need to have objects change position instantly but when I attempt to do so the object will start at that position when the timeline starts rather than changing to that position when I want it to.

 

So in this basic example, mc2 will start at 200 BEFORE tweening to 100, instead of changing position instantly to 200 AFTER tweening to 100, yet mc1 is working as intended only because the duration of the 2nd tween is higher than 0:

 

mc1.x = mc2.x = 0;

 

timeline.appendMultiple( [ TweenLite.to(mc1, 1, { x: 100 } ),
                                    TweenLite.to(mc2, 1, { x: 100 } ) ] );

 

timeline.appendMultiple( [ TweenLite.to(mc1, 1, { x: 200 } ),
                                    TweenLite.to(mc2, 0, { x: 200 } ) ] );

 

 

Any help on how to change this example code to work the way I intended it to would be very much appreciated!

 

Thanks,

Matt

[GreenSock]

Ah yes. The issue here is simply that people generally expect zero-duration tweens to render IMMEDIATELY, so that literally by the time the next line of code runs, it's done. When the tween is instantiated, there's no way for TweenLite to know that you're going to be scheduling it for later by dropping it into a TimelineLite. The solution is easy, though: just set immediateRender:false on the zero-duration tween. 

 

You might also want to consider using the convenience methods in TimelineLite which would make your code even more concise, plus you can use the set() method on the TimelineLite and it'll be smart enough to know you're scheduling it for later and automatically set immediateRender:false. For example, your code could be condensed to:

timeline.to([mc1, mc2], 1, {x:100})
    .set(mc2, {x:200})
    .to(mc1, 1, {x:200});

(I assume you're using version 12.x)

[shoey]

So much more help than I asked for, amazing, thank you!