Canvas Animations stop performing

[Ivan Dzhurov]

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

[ZachSaucier]

Hey Ivan and welcome to the GreenSock forums! We're glad you like GSAP.

 

24 minutes ago, Ivan Dzhurov said:

when the animation is in progress and i quickly go out of focus and back in

Can you please describe what you mean by this? I don't understand.

 

And if you limit it to only a few animations happening, does the same issue occur? Or is it only when you have lots of animations running?

[Ivan Dzhurov]

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

[GreenSock]

Yeah, that's super difficult to troubleshoot blind. 

 

Have you turned off lagSmoothing() like gsap.ticker.lagSmoothing(false)? You should only need to do that ONCE. It looks like you keep doing that. 

 

Also, did you check to see if the native Date.now() function is acting correctly in your environment? It almost sounds like it is jumping way ahead. That's the method GSAP taps into for its timing. 

 

Are you positive that this.spinConfig.startTime isn't zero (or a very small number)? And this.config.startDelay isn't a negative value, right? 

 

The only other guess I have is that maybe you've got logic in your code somewhere that's forcing the globalTimeline's playhead to jump way ahead. Again, very tough to do this blindly. I wish I could offer more assistance. 

[Ivan Dzhurov]

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?

[GreenSock]

Well you could console.log("frame:", gsap.ticker.frame, "time:", gsap.ticker.time);

 

Do you notice any odd jumps in those? And you did try running gsap.ticker.lagSmoothing(false), right? 

 

You never use gsap.exportRoot(), right? 

 

I'd recommend checking Date.now() like: 

// on startup:
var startTime = Date.now();

// then when you leave the window, check it...
console.log("left at", (Date.now() - startTime) / 1000);

// then when you return focus: 
console.log("returned at", (Date.now() - startTime) / 1000);

I'd also check to see if the startTime() of your animation(s) change at all. Check them before/after. 

 

It kinda sounds like you've got a really weird setting applied to gsap.ticker.lagSmoothing(), like with a very large number for the 2nd parameter. I wonder if you missed something in your code somewhere. 

 

My strong recommendation would be to strip EVERYTHING out and have literally ONE thing animating and almost no other code. Then slowly add things until it breaks. Please provide a reduced test case if you can. And if you don't want to add a lot of tweens, you could just use a crazy long loop to chew up CPU cycles and simulate lots of things happening. 

 

Good luck!

[Ivan Dzhurov]

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?

[GreenSock]

Do you have ANY code that handles when the window becomes active/inactive at all? My guess is the problem is related to that code if so. 

 

It's extremely unlikely that GSAP just "stops working" - what sounds more likely is that the time jumps ahead immediately. Like maybe you've either got a lagSmoothing() misconfiguration or something else that's making the playhead shoot ahead. 

 

I also wonder if you have an overwriting issue, like if you're creating tweens that kill other tweens when you activate the window again. That would explain why your onUpdate doesn't fire. Maybe try adding an onInterrupt callback to see if it's getting killed. 

 

And for the record, I don't think it's possible for an onComplete to get called WITHOUT first firing the onUpdate. Completing necessitates an update. 

[Ivan Dzhurov]

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.

 

 

 

Edited June 28, 2020 by Ivan Dzhurov
clicked enter too quickly

[OSUblake]

On 6/26/2020 at 6:46 PM, Ivan Dzhurov said:

  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()

      });

  });

 

Just a little tip. You don't need to wrap the animation in a promise as gsap animations are promisified, i.e. returning the animation is the same as returning a promise that will resolve on complete.

 

return 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)
});

 

https://greensock.com/docs/v3/GSAP/Tween/then()

https://greensock.com/docs/v3/GSAP/Timeline/then()

 

 

[GreenSock]

14 hours ago, Ivan Dzhurov said:

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.

The image you provided doesn't contain the necessary information. All the frames and times are identical. You need to show the data BEFORE that too. Like...does the time jump at some point? Does the frame skip a bunch of numbers at any point? If so, when? 

 

Can you simplify it to one tween and reproduce (so that you don't have to weed through so many console.log() calls)? 

 

I doubt we'll be able to get you a solid answer because you haven't provided a reduced test case. We have no way of reproducing this or seeing what code on your end might be causing this. I'm relatively confident that this isn't a GSAP issue because with so many sites using it, I'd expect that a significant problem like this would be reported by several people pretty quickly. I don't recall seeing any other reports of anything like this. I really wish I could help more. 

 

[Ivan Dzhurov]

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.

[GreenSock]

I'd strongly recommend that you produce a REDUCED test case. A link to a live site with hundreds of lines of [non-editable] code is gonna be a nightmare to troubleshoot and it's not a free service we provide. You don't need to share your real code or any of your artwork. Just start with a single object and start building up from there until you can reproduce the issue and send that to us. I suspect that along that path, you're gonna find the mistake and you won't even need our help

 

If you do need some custom consulting help, reach out to us privately and we'd be happy to talk about scope/costs/scheduling. And by the way, it looks like your company doesn't have the commercial license they need. I'd encourage you to snag the appropriate "Business Green" license at your earliest convenience

 

Happy tweening!