Jump to content


ScrollTrigger animations trigger when I switch pages. — NextJS

Recommended Posts

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?

Link to comment
Share on other sites

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:




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

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.