Understanding .add( .set() )

[katerlouis]

I have a timeline.

I want to set something at some point.

I want the .set() to be a part of the timeline so on reverse or new playback the status goes back to default.

 

This works, when I put a .set() on it's own inside the timeline. But when I want to .add() it, the .set() gets executed right away.

When I .add() a .to(), it doesn't get executed right away. 

 

Hopefully you got what I mean; the CodePen should clear it up.

 

Why doesn't the yellow box behave like the green one?

 

[EDIT: I just don't get it; when you execute the yellow box again after the first go through, it behaves like green.. I need yellow to always do it!]

 

Reason why I don't use .set() on the main timeline in the first place:

I have a function that dynamically calculates the values of the .set() and then returns the tween

See the Pen MmNeBE by katerlouis (@katerlouis) on CodePen

[Carl]

Thanks for the demo.

 

A TweenLite.set() creates a TweenLite tween with no duration (0 seconds). Since it has no duration it has to complete as soon as it gets created.

When you place a TweenLite.set() inside of an add() the TweenLite tween that gets created has no idea it is being placed inside another timeline or that it was called via add(). It just gets created and completes instantly and immediately renders in its "end" state.

 

A TimelineLite.set() is a timeline method that creates a TweenLite tween with no duration AND inserts it into a timeline. Since it is a timeline method it is AWARE that the TweenLite tween that gets created may be scheduled to run later (unless it is added at a time of 0 in the timeline) and automatically sets the tween's immediateRender property to false. This delays the rendering of the end state of the tween with no duration.

 

To fix your add(TweenLite.set()) you can give the TweenLite tween an immediateRender property of false like so:

 

.add(TweenMax.set(".box2", { scale: .5, immediateRender:false }))

 

This will tell the tween not to render as soon as it is create but to wait until it is scheduled to run inside the parent timeline.

 

 

 

 

 

 

[katerlouis]

Nice expanation. Makes total sense to me.

Bam!

 

 

PS: Where is the "solved this question" part?