0

Here's the scenario I'm coming across that's affecting my GSAP ScrollTrigger animations:

I have a home page that loads and animates. When I scroll down the home page, scroll trigger behaves normally. When I get to the bottom and decide to use the navbar to navigate to another page (I'm using the Nextjs <Link> component here), it sends me to the new page but starts at the BOTTOM Of the new page and quickly scrolls to the TOP of the new page.

This is a problem because it triggers all of my GSAP animations simultaneously for that page.

Is there a way to switch to a new page but START at the top— rather than start where ever you are in the y-position and scrolling to the top of the new page?

Essentially what's happening is that when I click on a <Link> component in Nextjs, the y-position of my viewport is retained during page transition. Once I'm on the new page, I'm still on that same y-position of the previous page, but then it SCROLLS to the top. This is bad because it triggers all of my GSAP animations.

kvncnls
  • 261
  • 2
  • 9

1 Answers1

0

Nevermind, I solved it!

I needed to override the scroll-behavior: smooth; with scroll-behavior: auto !important;.

I basically put scroll-behavior: auto !important; at the root :root {}.

kvncnls
  • 261
  • 2
  • 9