Jump to content
GreenSock

CraigS

TweenMax.set() moves to beginning of timeline

Go to solution Solved by Dipscom,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

  • Solution

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:

 

  • Like 4
Link to comment
Share on other sites

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});
  • Like 3
Link to comment
Share on other sites

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.

:)

  • Like 4
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×