Jump to content
Search Community

Possible bug for 0ms tweens within a nested timeline

ekfuhrmann 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 came across a possible on load bug when trying to transition between two scenes which required a `display` change.  I'm using a nested timeline to transition out 'Scene One', and then another nested timeline to transition in 'Scene Two'.  Since these scenes are overlaying atop one another, I'm changing the `display` from `flex` to `none` and vice-versa depending on if the scene is coming or going. Since `display` is not animatable, I really didn't need to set a tween duration so I used `0`. For some reason it seems like despite the parent Timeline being `paused`, this forces the tween to run on load. Adding any other number > 0 will result in it working as expected.


For my Codepen example, I am sharing the buggy approach. On load, you'll notice that `.scene.two` is showing (scroll down), and that the console is printing some text showing that the tween ran. If you click `.scene.one` it will animate properly to the next scene, and then clicking `.scene.two` will properly take you back to scene one, at which point it is now working correctly.


The trick I came up with to resolve this issue was to pause the nested timelines. This does indeed resolve the issue, but it does seem like there may be some buggy interaction causing `0`s tweens to run early, even if they are nested in a paused timeline.


I included some JS commenting to hopefully help clarify, but let me know what you think and whether or not I was misguided with my initial approach.



See the Pen YvJYvQ?editors=0011 by ekfuhrmann (@ekfuhrmann) on CodePen

Link to comment
Share on other sites

That's the expected behavior. Zero duration tweens, set(), from() and fromTo() tweens will fire immediately. I think you can fix that by adding immediateRender to false. Please try this on line 26.


.to('.scene.two', 0, {display: 'flex', immediateRender:false, onComplete: function() {


Zero duration tweens are a bit tricky so I'd recommend using the convenience method of set() for that tween instead of the way you have it now. It's essentially a zero duration tween. More info:



Happy tweening.



  • Like 3
Link to comment
Share on other sites

Great call on the suggestion of using set() rather than to(). I swapped it to a combination of set() and immediateRender:false to get the desired effect, but it still seems strange to me that a nested timelines set() and zero duration tweens will fire immediately even with the parent timeline paused. Nonetheless this solution works well for me.



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...