spirconi

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.

Ok, I added the following to the parent component which seems to have done the trick. useEffect(() => { ScrollTrigger.refresh(); }, [ScrollTrigger.getAll()]);

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

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.

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.