PEgaz

Hi, I've just came across that topic when looking for how to implement keeping progress in Next/React apps. So I'm undigging this topic with a specific question/request: - can I find anywhere a tut/solution example how to do in Next App (not very big but with dozen of ScrollTriggers in different components)? regards PEgaz

Thank you for your answer. Destilating it is so pritty hard, I just thought you may had an instant/obvious idea/solution when you saw it because it happened to somebody else/somewhere. If not ... I will have to cut elements one by one to see where the bug lies. reagards, PEgaz

I've prepared a small video with strange behaviour. Code is written in: "gsap": "^3.11.4", "next": "^13.2.4", I made a div red to be better visible. I want to put later some animation to that form elements, but I have problem with basics, because turning on PIN completely makes it unpredictable. As you will see on video when "pin" in scrollTrigger is off, everything works normally, "start" and "end", "scrollStart", "scrollend" markers are on place, whatever/however/in_what_speed I scroll. When I turn PIN on, "start" and "end" becomes unpredictable, it stops in different places whenever I make a break in scrolling and it snaps to different places and div with form jumps sometimes from place to place, sometimes shows only part of itself ... animation effect: useLayoutEffect(() => { let mm = gsap.matchMedia(); mm.add("(max-width: 768px)", () => { const tl = gsap.timeline({ scrollTrigger: { trigger: contactFormRef.current, markers: true, pin: true, invalidateOnRefresh: true, }, }); }); mm.add("(min-width: 769px) and (max-width: 1223px)", () => { const tl = gsap.timeline({ scrollTrigger: { trigger: contactFormRef.current, markers: true, pin: true, invalidateOnRefresh: true, }, }); }); mm.add("(min-width: 1224px)", () => { const tl = gsap.timeline({ scrollTrigger: { trigger: contactFormRef.current, markers: true, pin: true, invalidateOnRefresh: true, }, }); }); //clear and revert return () => { mm.revert(); }; }, []); jsx looks differently in original - but the same behaviour is noticable with plain HTML like: return <div className="w-full h-full bg-red-700" ref={contactFormRef}></div>; Please help if possible. PEgaz

Thank you again for all the tips, they saved my despered soul and I was sooooo happy because everything had been working .... until I started next section. Don't scream at me I put all project again but the question will be very precise: https://stackblitz.com/edit/github-vyyho4?file=README.md When I started working on ProjectSection immidately I came across a strange refresh problem. This file: components/projectsPage/ProjectsTitle.tsx holds component that will have small scrollTrigger animation with "PORTFOLIO" text, unfortunately any window size change, completely moves it out of site flow and shows it somewhere deeply in previous section of my site. Only hard refresh makes it come back on place. I have no idea why I did it in the same way as all previous scrollTrigger animations that worked perfectly well. regards Piotr

yes, you're right, I should have clean it a lot, I was just despered yesterday Thank you for your answer, I will incorporate all guides you wrote and then I will try to destille the problem if there's still any.

Hi, I started to play with your product when making my portfolio site in NEXT and I really love it, but ... I came across problems I cannot overcome, so ...I'm writing asking for help :) here's stackblitz url: https://stackblitz.com/edit/github-csjexd?file=README.md Problems started when I was trying to figure out how to implement whole site ScrollTrigger refresh when any change to window height/width occurs. What I did so far: - changed all start/end properties into functions - custom hook checking if any change in size occured (hooks/useDeviceSize) and if so - globally forced refresh in page.tsx with: useEffect(() => { () => ScrollTrigger.refresh(); }, [width, height]); - put in every scrollTrigger: invalidateOnRefresh: true , Problems: - if you start scrolling after reload and don't change window size everything work perfectly - if you start with small width, scroll into and you make window wider - all animation are not updated (or even if tehy are they are updated badly) - if you start with wide width, and make window narrower - so many beautifull errors please my eyes Help, please. regards Piotr