scrollTrigger in Nuxt on page change issue

[zozo]

Hello Forum, 

 

I'm building a nuxt app, and I have used https://github.com/ivodolenc/nuxt-gsap-module#readme

to use scrollTrigger. 

First of all I hope I did right to use it, but I could not manage to make scrollTrigger without it. 

So now it's working, I have a module that do something on scroll, pin the div a bit then let's go. It's great until you switch page. 

Since Nuxt is a onepager, it stay on the page and update the content. Since scrollTrigger had some style to my div content, (that's the problem) I can just remove those style on page loaded.

But is there a cleaner way ? 

[GreenSock]

Hi @zozo. I'm not at all familiar with Nuxt or that module you linked to (obviously it's not officially supported by GreenSock) but in general I'd guess that you'd just need to kill() the ScrollTrigger of the old/outgoing page and then after the new page loads (and you've created your ScrollTriggers), call ScrollTrigger.refresh() to force it to recalculate where the scroll positions are. And of course you'd need to wait until the old page is gone/unloaded fully before you do the ScrollTrigger.refresh() call. 

 

Does that help at all? 

[zozo]

Ah yes thank you Jack ! ok, good to know it's not officially supported, I will have to take time to remove it and try again to install it correctly. If some one know where I can find a good complete install of the bonus instruction for nuxt that would be of great help. 

Yes it helps ! ScrollTrigger.kill() / refresh() is what I was looking for.