Jump to content


Best way to keep time() up to date with autoRemoveChildren

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

Ok, time for you guys to teach me something :lol:


I have a very simple timeline 'queue' setup with autoRemoveChildren. I append callbacks at random times but need them to be delayed for 5 seconds, with a minimum 5 second gap between each.


The following code gets me exactly what I need:

var timeline = new TimelineLite({ autoRemoveChildren: true });

// later
if (timeline.duration() === 0) timeline.time(0);
timeline.call(function1, [parameter1], null, "+=5");

// later
if (timeline.duration() === 0) timeline.time(0);
timeline.call(function2, [parameter2], null, "+=5");

// etc

I found I had to include that duration() check in the case of the timeline becoming empty again. If this happens the playhead would remain at the end of the final removed child, while duration would become 0 as expected.


This is where I saw something really unexpected though: appending to the timeline works fine, starting from 0 again, however once duration exceeds time again, all the new callbacks that were appended prior to time are unexpectedly(?) executed. The sequence:

append function1 // time = 0,  duration = 5

append function2 // time = 0,  duration = 10

// wait 5 seconds

function1()      // time = 5,  duration = 10

// wait 5 seconds

function2()      // time = 10, duration = 0

append function3 // time = 10, duration = 5

append function4 // time = 10, duration = 10

append function5 // time = 10, duration = 15

function3()      // time = 10, duration = 15

function4()      // time = 10, duration = 15

// wait 5 seconds

function5()      // time = 15, duration = 0

Like I said, I have a very simple, working solution - I was just interested to know what causes the callbacks to execute at once, and if there was a method to trigger an update to time (timeline.play() does this, but only on the next tick).

Link to comment
Share on other sites

Great catch, Jamie. I think the playhead (time) should return back to 0 once all the tweens are removed, so I've made that change and posted a preview of 1.9.8 below. Would you mind giving that a shot and letting us know if it works well for you? 


I'd be happy to explain why things rendered the way they did for you, but I'll spare you the explanation unless you request it, especially since the behavior should be resolved with the update. 


Thanks again for pointing this out. 


Link to comment
Share on other sites

Thanks Jack, I removed the duration check and it's working perfectly now.


No need for any further explanations - I thought I was dealing with an expected behaviour and was just after some clarification.

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.