Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Alex Nesterov

Problem with nuxt and gsap on page navigation

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Do the same with ScrollTrigger.

inject("ScrollTrigger", ScrollTrigger);

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

  • Solution

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. 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×