Problem with nuxt and gsap on page navigation

[Alex Nesterov]

Hello, need help! How to use gsap in nuxt project? on the first load animation works correctly, but when navigate to another page animation breaks down. I think it because page not fully load, image in this example. How to fix it?

 

expample
codesandbox link

[elegantseagulls]

You'll need to do garbage cleanup to .kill() your ScrollTrigger or it will persist/duplicate on the next page.

And/or, if it's part of the main template (like a header of footer that's not being re-rendered/re-mounted on page/route change), you'll want to run a ScrollTrigger.refresh() / or ScrollTrigger.getById('your-id').refresh() to re-calculate it to the new page.

[Alex Nesterov]

36 minutes ago, elegantseagulls said:

You'll need to do garbage cleanup to .kill() your ScrollTrigger or it will persist/duplicate on the next page.

And/or, if it's part of the main template (like a header of footer that's not being re-rendered/re-mounted on page/route change), you'll want to run a ScrollTrigger.refresh() / or ScrollTrigger.getById('your-id').refresh() to re-calculate it to the new page.

How can i do this in my example? I use gsap globaly in plugins/gsap
codesandbox link

[OSUblake]

Do the same with ScrollTrigger.

inject("ScrollTrigger", ScrollTrigger);

 

[Alex Nesterov]

16 hours ago, OSUblake said:

Do the same with ScrollTrigger.

inject("ScrollTrigger", ScrollTrigger);

 

It didn't help. Everything works when all images are loaded and when you go back to about page. But doesn't work on first page navigation.  if use a timeout for animation, everything works too.

codesandbox link

[OSUblake]

Sorry, I must be missing something. Can you explain what the issue is? Everything looks fine to me.

 

I did notice you have a bunch of images without a concrete size to them, so maybe that is what you are talking about? Like you need to refresh the ScrollTrigger after every image loads?

[GreenSock]

Definitely make sure you give your image elements a specific size (width/height) up front, otherwise they'll shift the layout around after they load which would throw off the ScrollTrigger positions. Or, of course, you could just ScrollTrigger.refresh() after they load to make it recalculate things. 

[Alex Nesterov]

Thanks everyone, i solved the problem.
Need to refresh ScrollTrigger after, when something causes the layout shift.