Hello Zach,
Thank you for following up. I'll try to be as detailed as possible.
I increase the speed of my objects on the screen with the following tween
public start(config? Promise<void> {
if (this.state.running) {
return;
}
gsap.killTweensOf(this.speed);
this.speed = { value: 0 };
gsap.ticker.lagSmoothing(0, 0);
return new Promise((done): void => {
gsap.to(this.speed, {
duration: this.spinConfig.startTime,
ease: Back.easeOut,
value: this.config.speed,
delay: this.config.startDelay,
onUpdate: () => console.log(this.speed.value),
onComplete: (): void => done()
});
});
}
I just use it to increase the speed for spinning that I use later in an animation loop. Usually everything goes smooth, but after a few seconds, I click on another window so i lose focus of the window with the game and then go back and focus the window with the game. If I do it a few times quickly, the animation stops. I tried debugging to see if the animation is running and the onUpdate handler just runs only once, with the final value. E.g. It always starts from 0 and goes to 120. When the animation breaks, this on update only logs 120 once. I have tried it both with the lagSmoothing on and off. It happens even if this is the only animation on screen, but a lot harder to reproduce.
The strange thing is that only gsap animations stop, the pixi renderer and animations run fine.
I know that it is hard debugging like that. Hope this clears it up a bit.
Best regards,
Ivan