Ivan Dzhurov

Hello everyone, I am writing to ask if anyone can point me to an example or at least a starting idea of how to animate the landing of a rocket ship. My goal is to have a short animation of a static object that covers almost all the screen, but I want it to land fast and stagger on the landing to simulate a rocket ship landing. Aiming for a dramatic effect. Has anyone done something like that? Cheers, Ivan

Thanks, Jack, I know its very hard to debug without code. Is it an option to maybe send you a link private somehow? I am not allowed to publicly share code or images in the forum.

I don't have any code that handles active/inactive window. Even the pixi code uses default functionality. You are right that onUpdate fires, I updated my code like this: gsap.to(this, { duration: 0.25, ease: Back.easeOut, speed: 120, onStart: () => { console.log("Animation started"); }, onInterrupt: () => { console.log("Animation killed"); }, onUpdate: () => { console.log("frame:", gsap.ticker.frame, "time:", gsap.ticker.time); }, delay: 0, onComplete: (): void => { console.log("Animation completed"); done(); } }); Removed lagSmoothing entirely so its default and I get the output from the screenshot - what i find very strange also is that there is a significant delay between the gsap line being called and the onStart callback to enter - at least a second.

Yes, lagSmoothing is false, used only once. I never use gsap.exportRoot() time behaves ok, calculating proper time. Even performance stays at 60 fps, just the tweens stop working and trigger only one frame. I am now sure though that gsap just stops working, but cannot figure out how and why(most likely my mistake of course, don't want it to sound wrong). I added the code below and all good until a minute or so going in and out of focus, everything keeps logging and after repeating animation again it just stops going inside onUpdate. I paused the debugger on start and in fact it started then after the duration it just skipped to onComplete - without a single onUpdate callback. Does this help in any way?

Thank you, Jack. Yes, I understand it's not much to go with, but I am desperate already. Checked Date.now(), moved lagSmoothing to only get set on creation. Set the variables to exact numbers and this is still happening. I am not referencing globalTimeline anywhere in my code, is it possible that something else does it. Also, is it possible to debug the tween ticker somehow to maybe try and find the cause of the problem?

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

Hello guys, It's my first post, but I've been following you for years now, thanks a lot for all the work you are doing, because my work is getting easier and fun to do with the help of your framework. I am contacting you about a question that has been bugging me for weeks now. I have a complex game that uses lots of tweens for all sorts of stuff. I used to have memory leaks, but got them fixed with the help of other topics I follow over the forum. Although I cannot something even remotely similar to my issue. I cannot provide a link due to company policies, but I will try to explain. My game is entirely in canvas, using Pixi V5 and Gsap 3 now. I am using a tween to move speed property for moving objects on the screen and everything works perfectly for repeating animations, but when the animation is in progress and i quickly go out of focus and back in, all gsap animations just stop. No errors, nothing. Just no tweens. I tried logging values on onUpdate and onStart, but everything is always the same and just goes straight to onComplete. I kill all leftover animations before doing new tweens, but nothing helps. The framework just seems to stop working. I've tried everything. Please let me know if you had something similar before. Attached is the performance timeline