Arrg. TimelineMax onComplete being fired more than once

[peterPotter]

I was about to launch my site when I realize some inconsistent behavior with the onComplete callback. It works fine (i.e., fire the onComplete event just once) about 90% of the times in Chrome, and it is even more inconsistent on Safari and Firefox. For the latter two browsers, onComplete is being fired more than once often, and sometimes twice, and sometimes thrice, and sometimes once. 

if (this.tl) {
this.tl.invalidate();
}

this.tl = new TimelineMax({delay: 0});

this.tl.staggerTo(arrayOfElements, 0.55, {
onComplete: function () {
// The Console is logging this more than once sometimes, and sometimes just once, depending on the browser
console.log ("staggerTo Complete");
},
autoAlpha: 0,
y: "50",
ease: Expo.easeOut
}, 0.06, "+=0.08");

[peterPotter]

Oops.

 

This is the one, I presume:

this.tl.eventCallback("onComplete", function () {
console.log ("Should fire once at the end of the timeline" );
} );

[Carl]

I would be very interested in seeing a demo that shows the same code working differently between browsers.

The way your code is set up is that "staggerTo complete" will fire after each tween in the stagger completes.

 

Here is a demo that shows how to use the onCompleteAll parameter in a staggerTo.

 

http://codepen.io/GreenSock/pen/bzopa?editors=001

 

Notice how the message "all tweens are done" only appears once.

[Carl]

Oh, i see your other post about the eventCallback.

I wonder if the way you are invalidating the timeline is related to the issue. Regardless, a demo will help

 

Thanks.