I had this strange bug in a game I was making that caused the player to be able to click twice on a button, even though the event listener removed itself which should have prevented the second click. After spending many hours on this I've managed to boil it down to what I think is a bug in how TimelineLite handles call()
Here's an example:
var obj = {value: 0};
var timeline_1 = new TimelineLite({delay: 1, onStart: function() { console.log("timeline_1 start") }, onComplete: function() { console.log("timeline_1 complete"); }})
.to(obj, 0.5, {value: 1})
.add(function() {
console.log("function 1");
timeline_2.play(0);
}, 0.4)
var timeline_2 = new TimelineLite({paused: true, onStart: function() { console.log("timeline_2 start") }, onComplete: function() { console.log("timeline_2 complete"); }})
.to(obj, 0.5, {value: 0})
.add(function() {
console.log("function 2");
timeline_1.play(0);
}, 3);
The first timeline tweens an object's value to 1 during 0.5 seconds, and calls a function after 0.4 seconds. That function goes on to play the second timeline (previously paused). The second timeline starts tweening the same object's value back to 0 (0.1 seconds before the first tween is done, causing an overlap), and after 3 seconds calls a function that plays the first timeline from 0 again, effectively creating a loop.
The expected behaviour (for me at least!) is that the tween on the second timeline will overwrite the first, cutting it a little short.
What actually happens is that the first timeline's call() function runs twice right after each other (logging "function_1" twice to the console), even though the first timeline is only started once!
This only happens when the two tweens overlap. If I nudge the function calls and/or tweens so the second tween doesn't overwrite the first, the problem is gone. The same goes for when I have the second tween affect some other unrelated value instead: no problem.
Have I misunderstood something here, or is this in fact a bug?