Weird TimelineMax callbacks behaviour

[yurQo]

Hello, I need some help with timelines (gsap v2). Everything worked perfectly fine but after using timeline to tween progress of another timeline onComplete callbacks of seprate tweens of  first timeline started behaving weird. It's like each callback executes multiple times. In provided demo there were 2x more callbacks, in my production code - 4x more, i don't even understand what affects the amount of extra callbacks. Thanks in advance!

See the Pen gObNMYG?editors=1111 by Poluk (@Poluk) on CodePen

[ZachSaucier]

Hey yurQo, welcome to the GreenSock forums. That is interesting. 

 

Adding {paused: true} to the first timeline fixes the issue in GSAP 2 and 3. @GreenSock any ideas what's going on?

[yurQo]

Everything works as expected now, thanks a lot!

[GreenSock]

Yep, that's expected. Remember, by default, tweens/timelines start playing immediately. They are placed on a timeline (the root one by default) and their playhead is controlled by the parent's playhead. In other words, as the parent timeline's playhead moves, it moves the child's too (unless it's paused, of course). 

 

So in your example, you never paused the timeline, thus it basically kept trying to move its playhead WHILE you also had another tween that was attempting to control its playhead as well. The tween would put it in a new position, and then it would try to continue playing from there...and the tween would move the playhead to a new position, and it'd try to keep going from there. 

 

It's like a remote control car that has its wheels spinning, and as soon as you put it on the floor, it takes off moving. You pick it up and move it somewhere else, and...it takes off from there. Pausing the timeline is like powering down the wheels on that car - you can place it down wherever you want and it stays there. 

 

Anyway, that's what'd make it hit the onComplete multiple times. When the external tween puts the playhead close to the end, the "wheels are spinning" on the timeline and it hits the end on its own, but on the next tick the external tween moves the playhead to the end (or just before) and...again, it could hit the end. 

 

Does that makes sense? 

 

You should always pause a tween/timeline whose playhead you're animating.