IvanSmiths

Hey, thank you so much for your answer! This solved the issue! But I noticed something really strange on my local project, that for some reasons doesn’t happen in the stackblitz example. When i click on the image and change page, I land on a page not in the very top, but with a scrolled amount of pixels and sometimes I get this long console error pointing to line 108: seamlessLoop.time(wrapTime(playhead.offset)); I'll try to reproduce this bug in the Stackblitz example , but thank you already, the main issue is solved! Probably this issue is due to something else on my codebase overrideMethod @ console.js:213 _warn @ gsap-core.js:92 eval @ gsap-core.js:673 toArray @ gsap-core.js:667 Tween @ gsap-core.js:3197 set @ gsap-core.js:3646 _initTween @ gsap-core.js:2929 _attemptInitTween @ gsap-core.js:444 render @ gsap-core.js:3412 render @ gsap-core.js:2257 render @ gsap-core.js:2257 _lazySafeRender @ gsap-core.js:192 totalTime @ gsap-core.js:1727 totalTime @ gsap-core.js:2432 time @ gsap-core.js:1736 _setterFunc @ gsap-core.js:3692 _renderPlain @ gsap-core.js:3704 render @ gsap-core.js:3456 render @ gsap-core.js:2257 _lazySafeRender @ gsap-core.js:192 totalTime @ gsap-core.js:1727 totalTime @ gsap-core.js:2432 time @ gsap-core.js:1736 onUpdate @ HomeWorks.js:108 _callback @ gsap-core.js:990 render @ gsap-core.js:3465 render @ gsap-core.js:2257 _lazySafeRender @ gsap-core.js:192 updateRoot @ gsap-core.js:2695 _tick @ gsap-core.js:1315 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 requestAnimationFrame (async) _tick @ gsap-core.js:1310 Show less

Hi all! I am running in a problem with this animation (Stackbliz), an infinite looping horizontal section with a snapping functionality (which is causing the problem). The animation looks working properly, but as soon as I change page (by clicking in one of the images) I run into a scroll issue. When I am in the new page, if I scroll for a bit and then stop scrolling, the page get scrolled to the top. The issue is inside this part of code. Looks like this function is running even when the component is not rendered anymore: ScrollTrigger.refresh() ScrollTrigger.addEventListener("scrollEnd", () => scrollToOffset(scrub.vars.offset)); function scrollToOffset(offset) { let snappedTime = snapTime(offset), progress = (snappedTime - seamlessLoop.duration() * iteration) / seamlessLoop.duration(), scroll = progressToScroll(progress); if (progress >= 1 || progress < 0) { return wrap(Math.floor(progress), scroll); } trigger.scroll(scroll); } Can be that gsap.context is not able to cleanup properly this part of code? I am cleaning up like this: return () => { ctx.revert(); ScrollTrigger.getAll().forEach(t => t.kill()); } Thanks in advance!

Thank you to both! In fact i haven`t tried to use useLayoutEffect. But i think i found a solution! I tried to call ScrollTrigger.create instead of a timeline, and now is working. So the code now is: ScrollTrigger.create({ start: 1, end: () => ScrollTrigger.maxScroll(window) - 1, onLeaveBack: self => self.scroll(ScrollTrigger.maxScroll(window) - 1), onLeave: self => self.scroll(1) }).scroll(1); Hope this can help someone!

Hi all As a title i wanted to make an infinite scoll page with Next.js. The animation is working if the user scrolls down, but not when it scrolls up, it totally get stuck and nothing happen. The codepen that i inserted works perfectly, but is in React, not in Next.js. When i use the same exact code in a Next.js project, the animation "onLeave" doesn´t get triggered (so when the user scroll up nothing happen). I notice that if i remove this css, on a Next.js project: *, html, body { margin: 0; padding: 0; box-sizing: border-box; } the page crash when the user scroll up and trigger the "onLeave" function with this error: Also, another strange thing: The animation totally works with Next.js if I resize the page, even of just 1px. If i don`t resize the page, when the user scroll up nothing happen. I have also tried of importing the component without ssr, but nothing changes. I personally think that is a sort of a bug of Next.js, i hope someone have a solution for this I am sorry that i can not provide a project with Next js, but i haven`t found a way. The starter template Gsap with Next.js in Codesandbox gives me an internal error when i modify, even of a bit the code.