'Nextjs Routing - Is there a way to START at the top when switching pages? GSAP-related
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.
Solution 1:[1]
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 {}.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | kvncnls |