Vihaan2707

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

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.

Hi, thanks a lot for your help. That worked as well, but that made the animation a little choppy so I just saw my code again and I was setting the wrong element as triggerelement.

I do have scrub:1; should I change it to scrub:true. I meant by that if for example, I set end property to +="2000px", then the car moves very fast and disappears under the screen, but if it is "+=5000px" it moves slower and disappears above the screen

Hi, I am a new user of gsap, I just removed the end property and edited the other properties according to my requirements in my next.js project. The above codepen is the same as the documentation example with its end property removed. I am facing the same problem as that codepen, sometimes the car or tractor goes out of the screen while scrolling, I noticed the further the end, the slower the car moves and vice-versa. Could someone please suggest what I should do to fix this, I tried modifying start and end properties but that becomes unresponsive on different sizes. In simple words it is not responsive for all sizes. In my next.js project this is the code for the animation gsap.to("#motionSVG", { scrollTrigger: { trigger: ".section.hiw", start: "300px 20% ", scrub: 1, markers: true, onUpdate: (self) => { gsap.to("#tractor", { rotation: () => (self.direction === 1 ? 0 : -180), overwrite: "auto", }); }, }, duration: 10, ease: "none", immediateRender: true, motionPath: { path: "#motionPath", align: "#motionPath", alignOrigin: [0.5, 0.5], autoRotate: 90, }, });