ScrollTrigger breaks when navigating back ( useGSAP + React + React Router )

[rudrang]

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.

 

[GreenSock]

It looks like you're just creating things in a slightly funky order - you should always create your ScrollTriggers in the order they'd happen on the scroll, -OR- you can use refreshPriority to explicitly control that. In your case, you're creating an animation that uses a particular element as the trigger...and then you're creating a ScrollTrigger that PINS that very same element. The pinning affects how that element moves down the viewport and when it'd trigger start/end values. See the issue? So just re-ordering your code seems to solve it, right? 

https://stackblitz.com/edit/vitejs-vite-qrhvku?file=src%2FApp.jsx

 

(or did I misunderstand?)

 

13 minutes ago, rudrang said:

First of all, the work you have put into this masterpiece and the dedication you guys have! Hats off! 

💚

[Rodrigo]

Hi,

 

I came up with this 😄

https://stackblitz.com/edit/vitejs-vite-djpnvo?file=src%2FApp.jsx,src%2FApp.css

 

Also I'm not seeing any issues with routing and ScrollTrigger, everything seems to work fine when you go to the about page and then back to the main view.

 

Just in case we have this demo that shows a more complex setup with React Router and GSAP:

https://stackblitz.com/edit/vitejs-vite-d73sck?file=src%2Fmain.jsx

 

Hopefully this helps.

Happy Tweening!

[rudrang]

On 2/23/2024 at 2:43 AM, GreenSock said:

It looks like you're just creating things in a slightly funky order - you should always create your ScrollTriggers in the order they'd happen on the scroll, -OR- you can use refreshPriority to explicitly control that. In your case, you're creating an animation that uses a particular element as the trigger...and then you're creating a ScrollTrigger that PINS that very same element. The pinning affects how that element moves down the viewport and when it'd trigger start/end values. See the issue? So just re-ordering your code seems to solve it, right? 

https://stackblitz.com/edit/vitejs-vite-qrhvku?file=src%2FApp.jsx

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!

[Rodrigo]

Hi,

 

I just went through your demo and it seems to be working as expected:

https://i.imgur.com/W1SnPKC.mp4

 

What's exactly the issue you're having?

 

Happy Tweening!

[rudrang]

On 2/26/2024 at 10:29 PM, Rodrigo said:

Hi,

 

I just went through your demo and it seems to be working as expected:

https://i.imgur.com/W1SnPKC.mp4

 

What's exactly the issue you're having?

 

Happy Tweening!

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!

[GreenSock]

Are you saying that you see that behavior on this demo?: 

https://stackblitz.com/edit/vitejs-vite-qrhvku?file=src%2FApp.jsx

 

I don't. But I think I see it on your version that uses a timeline instead of a tween. There are several solutions you can choose from: 

1. Set invalidateOnRefresh: true on your ScrollTrigger.
2. -OR- use a tween instead of a timeline.
3. -OR- call ScrollTrigger.refresh() immediately after you finish populating your timeline

Does that help?

[rudrang]

5 hours ago, GreenSock said:

Are you saying that you see that behavior on this demo?: 

https://stackblitz.com/edit/vitejs-vite-qrhvku?file=src%2FApp.jsx

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

 

 

5 hours ago, GreenSock said:

I don't. But I think I see it on your version that uses a timeline instead of a tween. There are several solutions you can choose from: 

1. Set invalidateOnRefresh: true on your ScrollTrigger.
2. -OR- use a tween instead of a timeline.
3. -OR- call ScrollTrigger.refresh() immediately after you finish populating your timeline

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?



 

[GreenSock]

6 hours ago, rudrang said:

The demo link provided by you is still buggy

I can't reproduce the issue at all. Not even once. I must have scrolled and refreshed at least 40 times. Zero problems ever. Maybe I'm missing something? 

 

The other problem in your setup is that you didn't register the useGSAP hook before you used it:

gsap.registerPlugin(useGSAP, ScrollTrigger);

In most real-world projects, that's not even necessary because the bundler consolidates things but in online editors like Stackblitz, it's actually pulling in a GSAP dependency for the useGSAP hook and another GSAP for the one you're using to animate, thus it's actually using two completely different GSAP objects. So the context is in one, but the animations are created in another. Registering the plugin ensures that they're using the same one.

 

Also, you were creating your ScrollTriggers in the wrong order - you should always create them in the order they'd trigger on the page (or you can define a refreshPriority if you can't do that).

[rudrang]

3 hours ago, GreenSock said:

I can't reproduce the issue at all. Not even once. I must have scrolled and refreshed at least 40 times. Zero problems ever. Maybe I'm missing something? 

Not sure, I guess I will have to rely on the work around. 

 

3 hours ago, GreenSock said:

The other problem in your setup is that you didn't register the useGSAP hook before you used it:

gsap.registerPlugin(useGSAP, ScrollTrigger);

In most real-world projects, that's not even necessary because the bundler consolidates things but in online editors like Stackblitz, it's actually pulling in a GSAP dependency for the useGSAP hook and another GSAP for the one you're using to animate, thus it's actually using two completely different GSAP objects. So the context is in one, but the animations are created in another. Registering the plugin ensures that they're using the same one.

Noted! I completely missed that! 
 

On 2/23/2024 at 2:43 AM, GreenSock said:

It looks like you're just creating things in a slightly funky order - you should always create your ScrollTriggers in the order they'd happen on the scroll, -OR- you can use refreshPriority to explicitly control that. In your case, you're creating an animation that uses a particular element as the trigger...and then you're creating a ScrollTrigger that PINS that very same element. The pinning affects how that element moves down the viewport and when it'd trigger start/end values. See the issue? So just re-ordering your code seems to solve it, right? 

https://stackblitz.com/edit/vitejs-vite-qrhvku?file=src%2FApp.jsx

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