Jump to content


event doesn't raise if timeline has 0 duration

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

When timeline's duration is 0, it won't raise any event (onComplete, onStart, onUpdate, etc.)


In ActionScript version, I used to fix this problem by adding a temp TweenMax with duration 0.001 and the even will work just fine. However, in JS version, it still doesn't fix the problem

  fixZeroTimeline = function(timeline) {
    if (timeline.totalDuration() <= 0) {
      var tempTween = TweenMax.to(dummyObject, 0.001, {paused:true});
      tempTween.paused = false;

After calling this function, timeline still doesn't raise event.



Link to comment
Share on other sites

A timeline with no tweens whatsoever does indeed just end and make itself eligible for gc. In order to complete, it seemed logical that it'd need to actually contain something, even if it's a zero-duration tween. 


It doesn't look like you're actually adding anything to your timeline - you're just creating a tween at the root level without ever adding it to your timeline. You could do this:

//add a callback at the zero spot. This won't affect the timeline's duration at all. 

//OR you could certainly add a tween if you prefer:
timeline.to(dummyObject, 0, {});
  • Like 1
Link to comment
Share on other sites

My mistake, I post incomplete code. My code did add the tween into timeline.


I found a scenario where this problem will occur. If TimelineA is insert into TimelineB, and TimelineA has duration 0 while TimelineB's duration is not 0. TimelineB will has problem raising event as well.


So, to fix this problem, I must add dummy TweenMax to every timeline nested inside.

Link to comment
Share on other sites

I couldn't replicate that behavior. TimelineB fired its onComplete perfectly for me, even if TimelineA was completely empty and nested inside TimelineB. Could you create a codepen or jsfiddle or HTML doc that clearly demonstrates the [bad] behavior? 

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.