Jump to content


Nextjs routing breaks scrolltrigger animatinos

Moderator Tag
Go to solution Solved by OSUblake,

Recommended Posts

I am using next.js with gsap. I have 2 pages homepage and about page, my homepage works very well, but in the about page I have added a horizontal scrolling animation. For some reason there is a gap between the bottom of the screen and bottom of my container and also when scrolling, it doesnt scroll this the last panel. 

Also when I route between these 2 pages, 1 out of 10 times the animation on the homepage breaks. I have read other issues regarding this on gsap forum and tried everything suggested there. I have used uselayouteffect hook to kill the instances. 

This is the link to the codesandbox: https://codesandbox.io/s/practical-bardeen-9llbq .

Kindly increase the width to maximum possible width as the animation is only there for laptop screens and I have removed it on mobile screens.

Link to comment
Share on other sites

Hi Vihaan,


We'd be more than happy to take a look if you can provide a minimal demo that shows the issue. Please reduce it down the only the relevant parts. Thanks!

  • Like 1
Link to comment
Share on other sites

Hi, I have reduced the parts as much as I could with the error still persisting. There are 2 issues, on the about page the horizontal scroll doesn't go all the way till the end and when navigating back from about page to home page,  1 out of 10 times the home page animation breaks

Link to comment
Share on other sites

  • Solution

Did you mean to post a updated link, your code sandbox still looks the same?


We're don't have the resources to help you debug 1000s of lines of code for free. If you think it's an issue related to GSAP, then you'd need to provide a minimal demo that clearly demonstrates the issue. 

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.