Possible bug for 0ms tweens within a nested timeline

[ekfuhrmann]

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

[PointC]

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:

https://greensock.com/docs/TweenMax/static.set()

 

Happy tweening.

 

[ekfuhrmann]

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.

 

Cheers!