Jump to content
Search Community

Nextjs routing breaks scrolltrigger animatinos

Vihaan2707 test
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, 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

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.
  • Create New...