rudrang

Not sure, I guess I will have to rely on the work around. Noted! I completely missed that! I had updated my ScrollTrigger order after this reply, I thought I got them right? Either way, thank you so much for your time! I am sticking to the solution of scrolling to the top on route change

Nope, I am adding the demo link here, https://stackblitz.com/edit/vitejs-vite-g87tuc?file=src%2FApp.jsx The demo link provided by you is still buggy I tried them but it still does not work. I am trying to scale the canvas first and then pin it. On page change after scrolling down, the canvas stays pinned but goes back to original scale. The only work around I found was to scroll to the top when the component is mounting but it is not ideal, is there any other approach I should use?

Hi again! I am facing this issue in a sidebar layout. I try to pin the sidebar and am successful in that but the main content, which is a grid with 2 column layout, overlaps the sidebar as soon as the sidebar is pinned. It seems to be resolved when I use predefined values for the columns instead of 1fr units. I tried making the sidebar sticky using CSS (not GSAP) and there was no overlapping of the sidebar/ overflowing of the main content. Here is the link for the demo. What am I missing here? Thanks!

Hi! Sorry for the delay, The same issue exists in the previous demo. Basically, when one scrolls down the homepage, navigates to a different page and then comes back, the applied styles revert back to the original styles. I have also attached a video explaining the same. Thanks! issue.mp4

Hi! Thank you for the quick response! I understand what you mean, and it totally makes sense! Although I ran into a different issue after implementing your solution. The code @Rodrigo shared (thank you for that btw) was still buggy for me. Now the issue is that the canvas stays pinned but the animation progress isn't applied to it, ie. the canvas does not scale to 1. I tweaked @Rodrigo code to recreate the issue, here is the code for it. Also is there a way to check if ScrollTrigger has actually been refreshed? Sorry if these things sound naive! Cheers!

First of all, the work you have put into this masterpiece and the dedication you guys have! Hats off! Coming to my issue, I am relatively new to React/ React router. I have gone through most of the articles in the forum regarding pinning/ ScrollTrigger/ Router navigation and many more and yet fail to understand what is it that I am doing wrong. In my actual project, there are multiple components, each having their different animations. My homepage works flawlessly, the issue arises when I navigate to a different page and return to my homepage. Now I have read tons of articles stating to call ScrollTrigger.refresh() or ScrollTrigger.update() but it does not seem to work. I am using the latest version of GSAP and react router 6.22. StackBlitz link: https://stackblitz.com/edit/vitejs-vite-kdw52g?file=src%2FApp.jsx Any help is appreciated! You all are anyway appreciated Thank you.