Marcelo Jr.

Thank you guys! I did learned a lot from this. I hope it can also help somebody else in the future - as many other topics here helped me. I'll try to show up from time to time if I feel I can contribute with somebody else's question, as I get more experienced.

Yeah, I was... Because in my head this should be read only once, that's why I'm not understanding why the demo works by calling refresh() on all ScrollTriggers right after the creation of the animation did the trick in the demo - I was not using the strict mode anyway. Great! I think my problem was just not being sure how to properly call it, because apparently the <ScrollRestoration /> component was only scrolling up after the render. I just updated the demo to reproduce the error I was talking about - just go to the second page, scroll down a fair amount and navigate back to the first page. It will be scrolled up, but the background color will be incorrect. There I also left some comments to my final best solution and to calling ScrollTrigger.refresh() after the creation of the animations, that somehow works in the demo (not my project though). It's also good to know that nesting these tweens is a bad idea... It wasn't what was causing this specific problem, but I'm not doing that again - thank you (and @elegantseagulls)! Yeah, thanks! But I wasn't happy with that solution, because I was probably losing performance with the useEffect(), so I replaced that solution for having another useLayoutEfect() to scroll up whenever the path changes before the creation of the animations, in the same component - that's the solution that is currently in the demo btw. Well, by the end of the day I guess the solution to my problem was understanding better how React renders all components and when GSAP enters the process. I'm sorry if that is not the goal of this forum and for wasting everyone's time.

Thanks for the reply @GreenSock! Yes, I am. I was able to figure out a way to make my real code here to work too, but it was not by using the same logic as the demo - I'll explain below. Yeah, sorry, that was I what meant (I'm relatively new to this)… I'm still not getting why calling ScrollTrigger.refresh() right after the "creation" of the animation worked in the demo... This function is using the same position parameters scrolling than those available when the animations were created, isn't it? The useLayoutEffect() in this case of the demo is only being read once, right? It does to understand how the ScrollTrigger works under the hood and also when to use ScrollTrigger.refresh() (if things get moved/resized/whatever), but I still don't get why call it right after the creation of the animation... Should I do this every time that I have an animation that uses ScrollTrigger? Oh, I did! About my solution to my real project, the only thing that worked was to use useLayouEffect() to handle the scroll up when a route changes and creating the animations using the regular useEffect() - that runs a little bit after... I know that you recommend using useLayoutEffect() to create the animations and I think I understand why - the react docs even has a really useful demonstration about the difference between the two hooks, but I admit that I'm not super experienced and probably there's a better way in making sure that the animations will be created (or calling ScrollTrigger.refresh()) always after the scroll up has already "happened" and only use the useLayoutEffect() for the animations, but I really don't know how...

It's funny... I modified the code a bit in order to make further tests. First I fixated the navbar on the top of the viewport, and then even when I was navigating normally I encountered the same error. Then I changed the logic of the "scroll restoration", by removing the ready-to-use component from react router and implementing the useEffect/useLocation logic to scroll up in a parent component. After that I took @elegantseagulls's suggestion and explicitly called ScrollTrigger.refresh(), after the the gsap context inside the same useLayoutEffect that contains all the animations and the problem completely disappeared. But when I do the same in my actual project, it is still not working... @elegantseagulls I did the demo in incognito mode so it wouldn't change the "real" code, and I observed no change, but it wasn't saved though... Sorry! If it is really that important for this issue, I can create another demo and post here just with these changes. @Rodrigo Thanks for the reply! What was going on, and maybe I should have explained that better, is that every time the user is looking at the second, third or fourth sections on the second page, and then pressing 'return' on the browser (that should bring the user back to the first page), although the page would scroll up to the top as intended, the color of the background, that should be the '#99f' of the first section, was another color (the same as one of the sections below). But now the demo is working, and I don't really understand why - isn't the gsap context supposed to "restart" every ScrollTrigger whenever it is remounted? Why calling ScrollTrigger.refresh() right after the context did the trick? Anyway, my real code is still not working, but the demo posted here is, so I will try investigate some more about why one is working and the other is not, and in the meanwhile I would really appreciate if someone here could explain to me what's really going on with this logic...

@elegantseagulls thank you for the reply! I tried to do that in separate demo, it doesn't seem to solve the problem... Were you able to do it?

Hi! First of all, I'd like to say that I've been using GSAP for a few months now and I'm loving the experience! It allows me to get more creative and implement some impressive animations in a relatively easy way. Every time I didn't know how to do something or I was having issues with the logic that I was using I was able to solve the problem in a matter of minutes by reading further the docs or browsing the forum for similar problems. You do a great job! This time I wasn't able to actually solve the problem by reading similar older posts - yes, I probably have read them all - or the docs, so I'm writing here for the first time. I created this demo at CodeSandbox to further illustrate my problem. I'm trying to use ScrollTrigger to control a background change in a personal project that uses React + React Router v6 (in this demo I'm also using typescript, but the differences should be minimal when compared to vanilla javascript). It is my intention to scroll back up whenever the user is navigating the website, so I'm using the ScrollRestoration component from React Router to do so - I actually think this is a default behavior in most browsers now, and I also tried to use plain React to scroll back up when navigating (with useEffect and React Router's useLocation), but the result is always the same. When navigating "forward" there is no issue, but when you go to the second page, scroll down a considerable amount and press the browser's return button to go back to the first page, the background color is off, usually having the color of the section that is situated in the exact 'offsetY' position of your previous position in the second page. I'm already using the gsap.context() in my project, and it is my understanding that when I return the gsap.context().revert() in the useLayoutEffect when the component unmounts, all related ScrollTriggers inside of it should also be reverted too, right? I suspect that React is only scrolling back up after the component is already rendered, but somehow ScrollTrigger is not able to correctly read this position when that happens, but if you scroll down a little to trigger the "start" of the first animation, everything is back to normal... What am I doing wrong? Thank you in advance!