TweenMax.set() moves to beginning of timeline

[CraigS]

I have 3 timelines - a main timeline and 2 child timelines built in functions. The second timeline contains a set method which appears to get placed at the beginning of the main timeline when added. According to the docs, both the add and set methods are placed at the current end of the timeline if the position is omitted. Can you help me understand what I'm doing wrong?

 

Please see codepen. The green box is being hidden at the beginning if the main timeline instead of after the first tween completes.

 

 

See the Pen LNMqNB by kraig (@kraig) on CodePen

[Dipscom]

Hi CraigS,

 

Welcome to the forums (Even though your profile says you're a long time member...).

 

What you are seeing is expected behaviour. The .set() method can be a bit confusing because it is a zero second tween and it render immediately. As you see, there, right at the start of the main timeline. You can set immediate render to false. Or you can change the method from being a .set() to being a .to() with a very tiny duration, like 0.01.

 

Change:

.set(greenBx, {visibility: "hidden"})

to:

.to(greenBx, 0.01, {visibility: "hidden"})

And you will have the behaviour you expect.

 

 

Here is a video where Carl goes over the immediate render property in more detail:

 

[Carl]

Hi CraigS,

 

Welcome and thanks for providing the demo.

 

--

 

Great work, Pedro. 4 stars.

 

I would slightly prefer setting immediateRender:false so I'll just put it here so everyone can see what it looks like.

.set(greenBx, {visibility: "hidden", immediateRender:false});

[PointC]

Hi CraigS

 

Cool name. 

 

In addition to the great advice and info from Carl and Dipscom, I'll throw my two cents worth out for you. You have an additional option by pausing the timeline in the function and playing it when you add it to the master timeline. So two lines of code would change in your pen:

var tl_b = new TimelineLite({paused:true}); // pause it in the function

.add(b_tweens().play()); //play when adding to the master timeline

Happy tweening.

[CraigS]

Gentlemen, thank you so much. I chose to use immediateRender to fix my problem. However, the "from" tween that immediately followed it caused another. The information provided in this post along with the video gave me me what I needed to restructure the 2 lines of code to produce the desired results. It's now clear that two consecutive ImmediateRender:true tweens on the same object(s) need special consideration. Also, learning how to use transform:"none" to restore original values like x and y played a very important part of changing a from tween to a to tween.

 

The other proposed solutions gave me a lot of ideas of how I can use them in other situations. They were much appreciated as well.

 

And yes Dipscom, I have been an off and on member for a long time. The fact that I have always found answers in this forum without asking questions says a lot about the effort and expertise you guys put into it.