Jump to content
Search Community

Timeline actions fire immediately

MattiasJ test
Moderator Tag

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'm setting up a timeline where divs should move around as the timeline plays.

The problem have is that timeline actions fires immediately when I define the timeline.

See this pen

See the Pen fkDBK by anon (@anon) on CodePen

The z-index should change after some time but it doesn't it changes immediately .


If the code look like this it doesn't work:

tl.add("lab2", 1);

tl.add( TweenMax.to('#d1', 0, {zIndex: 2}), "lab2");


It's not a tween I now, but I want to be able to init divs at certain points in the time line before tweening like setting z-index, top, left etc. But this doesn't work.


Any solution to this?

Link to comment
Share on other sites

Ah yes, when you create a tween with duration 0, GSAP sets immediateRender to true by default (if you haven't specified it yourself). I can see why it caught you, but it's just an order of operations problem disguising a very useful feature i.e.

TweenLite.to(foo, 0, { left: 100 });

// some other code here

// With immediateRender:true (default with duration 0), I can rely on
// foo's left being 100 right away.

// With immediateRender:false, it would wait until the next render
// tick, so any code running here would not see foo's left changed
// to 100
2 ways to solve this one:

tl.add( TweenMax.to('#d1', 0, { zIndex: 2, immediateRender: false }), "lab2");

// or using the helper method:
tl.to('#d1', 0, { zIndex: 2 }, "lab2");
The .to() method of TimelineLite/Max defaults immediateRender to false, since it's aware you probably want it to happen at a later point in time. When you use .add(), the tween is created with no knowledge of your intention to add() it to a timeline, so it renders immediately.


P.S. There's a .set() method on TweenLite/Max and TimelineLite/Max that skips the duration parameter

TweenLite.set(foo, { left: 100 });

tl.set(foo, { left: 100 }, "label");
  • Like 3
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.
  • Create New...