GSAP gets choppy when leaving window for a while

[tobiasger_]

I'm building a site that uses GSAP and especially ScrollTrigger for different animations across the site. I have experienced recently that everything works smoothly and without any issues when initially loading the page. I can test it for a few minutes and then I might leave the tab or just bring another application than the browser on top of the browser window for a few minutes. When returning to the site (without refreshing, just going back to the tab or closing the window on top of the browser) it's like the triggers gets delayed quite a bit on scroll which results in a not very smooth experience. It's like the animation ends up on the point where I stop scrolling, hard stopping there and not interpolating in between, instead of following the scrub throughout as it does when I initially load the page.

I just wanted to check wether this is a known problem or if there is anything that can be done to prevent it?

[GreenSock]

Nope, that's not a known issue. It sounds like you may have code that's creating memory leaks or some other problem. It's very difficult to troubleshoot blind, though. I'd recommend doing a performance audit, looking for memory leaks, making sure you're cleaning up after yourself (event listeners, making sure you're not creating a ton of conflicting tweens that infinitely repeat or something), etc. That's not really something we can do here in these free forums but you're welcome to post in the "Jobs & Freelance" forum if you want to find paid assistance. 

 

Good luck!

[tobiasger_]

Thank you! Worth checking if there are any memory leaks, but I'm not really doing anything too advanced currently.

 

I'm using Nuxt (Vue) and I'm killing all GSAP instances in the components that are using them on beforeDestroy() as recommended. I'm wondering if there is anything with Nuxt and GSAP in combination or something in the way I'm using them together that creates this issue?

 

Right now for example I got the issue I described, where scroll animations are only changing their state after I've stopped the scroll. And checking the console when that happened, I had an error laying there that mentioned something about "invalid component name _Ctor", which seems to be an error you can get when not naming page components in Nuxt correctly. The animation was working flawlessly on initial page load though.

 

So I'm wondering if these occasional errors in Nuxt could be reasons for why the GSAP instance becomes affected, like if it aborts the script in some way? I'll continue to be as meticulous as possible about how I do things in Nuxt and hope that an error free console maybe makes it work better.

[GreenSock]

12 hours ago, tobiasger_ said:

I'm wondering if there is anything with Nuxt and GSAP in combination or something in the way I'm using them together that creates this issue?

Not that I know of, but I'm not a framework guy. I'd definitely recommend looking at gsap.context() for making cleanup easier. And check out this article: 

 

 

12 hours ago, tobiasger_ said:

So I'm wondering if these occasional errors in Nuxt could be reasons for why the GSAP instance becomes affected, like if it aborts the script in some way?

Nope, there's no "aborting" that occurs in GSAP like that. 

 

Good luck!