[ScrollTrigger breaks React Router?]

In my instance it is a very light app and only re rerenders twice as there is not much interactivity. I needed a fast solution to get the site live, but noted this is not recommended and will look for a better solution once I have chance to go back to it. 

[ScrollTrigger breaks React Router?]

Ok, I added the following to the parent component which seems to have done the trick. 

 

useEffect(() => {

ScrollTrigger.refresh();

}, [ScrollTrigger.getAll()]);

[ScrollTrigger breaks React Router?]

I just noticed if i resize the window it works (with useEffect), maybe that will flag something that might be the cause?

[ScrollTrigger breaks React Router?]

16 minutes ago, OSUblake said:

Welcome to the forums @spirconi

 

Can you make a demo on CodeSandbox showing the problem? And did you try useLayoutEffect and make sure the component you are pinning is not fragment?

 

 

I have not tried to make a demo yet, I was hoping one existed I could try to work it out from first. 

 

Actually, I tried useLayoutEffect, and whilst it did not work, it may provide a clue. 

 

With useEffect, the pins work fine on initial load. The issue is when i go to / come back from another page it just ignores the pinned scrolltriggers. I notice the markers work as expected. I can see the top marker stay in place, which is met by the element start marker. When i come back to the page, the markers are in the same place but are just ignored. 

 

I noticed with useLayout effect the top marker moves up the page, so the pin never triggers. So that didnt work. 

 

I am using locomotive scroll setup (all works as expected minus this issue). I am suspecting it may be something to do with that setup up rather than gsap specifically. 

[ScrollTrigger breaks React Router?]

Are there any demos on this? Cannot seem to get it to work. I am killing the ST and can see they regenerate. Normal animations work but the issue seems to be with pinning.