ScrollTrigger animations trigger when I switch pages. — NextJS

[kvncnls 4 Likes (Newbie)]

So I have the home page set up with a fixed position navbar at the top.

You land on the site and an intro animation occurs just fine.

You scroll down and the animations occur just fine.

 

But once you're at the bottom of the home page and decide to navigate to another page via the navbar links from the fixed navbar, (I'm using the Nextjs <Link> component here), it switches to the new page but starts at the BOTTOM of the new page then SCROLLS up to the top of the new page, triggering all of the animations for the new page.

 

It's as if switching pages brings you to the same y-position as the previous page, but then it autoscrolls really quickly to the top as if it's an anchor tag with an #id being clicked.

 

Is this a Nextjs issue? Or a GSAP issue?

[GreenSock 18,243 Likes (Superhero)]

Pretty tough to diagnose without a minimal demo but are you killing all your ScrollTriggers on the page that is exiting? My guess is that you're not and they're sticking around and maintaining the scroll position internally in order to prevent a jump. 

 

You can kill all ScrollTriggers like this: 

ScrollTrigger.getAll().forEach(t => t.kill());

I doubt you'll need this (assuming you're killing things properly as instructed above), but you can force ScrollTrigger to clear any recorded scroll positions:

ScrollTrigger.clearScrollMemory()

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

I'd bet that if you make sure you're using the latest version and you kill your ScrollTriggers on the exiting page, the issue will be resolved. If not, please provide a minimal demo, like in CodeSandbox. Here's a starter template https://codesandbox.io/s/gsap-next-js-starter-jekrn