Nextjs routing breaks scrolltrigger animatinos

[Vihaan2707 0 Likes (Newbie)]

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.

[OSUblake 18,538 Likes (Superhero)]

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!

[Vihaan2707 0 Likes (Newbie)]

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

[OSUblake 18,538 Likes (Superhero)]

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.