Nuxt 3 + GSAP ScrollTrigger start/end position problem after route navigation

[Marco Rodrigues]

Hi.

I have been recently started working on Nuxt 3 projects and was trying to implement GSAP ScrollTrigger on it.
Everything was working fine until I realized that sometimes, after navigating routes, the ScrollTrigger start/end positions were wrong. 

I looked on the forum and found similar topics, but nothing came up for Nuxt 3 and I have been stuck with this for a while. 
I'm a aware this is a problem caused by Nuxt 3 spa hooks, but even after killing a simple scrolltrigger on the unmount hook, it does not work properly once I come back to the same route.

Here's a simple StackBlitz Nuxt 3 + GSAP demo I created. The animation is pretty simple, the ball in the center is supposed to scale on scroll, which it does, but if you change routes quickly, or after a couple of times, you will see that the markers will be on top of the viewport and not work anymore. ( Seems pretty random since if you keep spamming and switching routes, it will eventually start working again)

StackBlitz: https://stackblitz.com/edit/nuxt-starter-yjdl5s

I know Nuxt 3 is pretty recent and is not even released yet, so there isn't much information about it yet, but any potential help or guide on how to solve this is greatly welcomed.

[GreenSock]

If the start/end values aren't calculated correctly, that means the layout must have shifted AFTER the window's "load" event which would make sense if you're using a framework that's dynamically loading in new routes. So just make sure you call ScrollTrigger.refresh() AFTER you're done shifting around the layout. 

[Marco Rodrigues]

46 minutes ago, GreenSock said:

If the start/end values aren't calculated correctly, that means the layout must have shifted AFTER the window's "load" event which would make sense if you're using a framework that's dynamically loading in new routes. So just make sure you call ScrollTrigger.refresh() AFTER you're done shifting around the layout. 

Even by calling ScrollTrigger.refresh() it seems to not work.
It might actually be something related to Nuxt 3 onMounted hook that for some reason is being called before the DOM is ready, but I'm not completetly sure.
Came across this github thread if anyone also seems to have the same issue: https://github.com/nuxt/framework/issues/3587


 

[GreenSock]

7 minutes ago, Marco Rodrigues said:

Even by calling ScrollTrigger.refresh() it seems to not work.
It might actually be something related to Nuxt 3 onMounted hook that for some reason is being called before the DOM is ready, but I'm not completetly sure.

Yeah, it sounds like a Nuxt issue then. Maybe try running ScrollTrigger.refresh() after a requestAnimationFrame() in the onMounted hook. Or a setTimout() that gives it a little space. Just an idea.