Scroll trigger pin React components start positions

[Tricto]

I have a pinned section in my page, which makes the other Scroll triggers I have in different child components have their starting positions inaccurate.

I tried refreshing the Scroll trigger(using ScrollTrigger.refresh())  in the main page(file) but the issue remained.

Also I want to know if there is a way I can pass down an instance of Scroll trigger and Gsap to my other components, so If i refresh that one instance, it updates everywhere, or is there a better way to handle having multiple gsap and scroll triggers in different components but still being able to control them from the main page?

Also I want to know if  the better approach is to write all my animations in one useEffect with all the jsx in one page(file) or have some of the animations for different parts of the page as components which include their respective jsx. So pretty much everything in one page or components style ?
I ask this because the component approach has been a headache for me, because one way or another the starting points end up inaccurate.
I would apperciate if someone could help with a direction I could take.

This is a simplified version https://stackblitz.com/edit/vite-react-tailwind-fpc1wz?file=src/App.jsx

where I tried to refresh a child component but it didn't work

See the Pen App.jsx by edit (@edit) on CodePen

[Toso]

hi @Tricto since you are using react it is recommended to use the useGSAP() Hook 

also, you are not passing the tl to the child component you can take a quick look here 

 

https://gsap.com/resources/react-advanced#passing-down-a-timeline-prop

 

it would be awesome if you could clean any unnecessary code and test with minimal animation so it is easier for anyone to help 

 

hope this helps a little 🙏

[Rodrigo]

Hi,

 

I'm a bit lost here, what exactly should be happening in your demo? Unfortunately the description of the issue you offer is a bit vague, for me at least, so I can't really follow what's the issue you're having right now because the code in your Box component does nothing so I can't really tell where exactly this is breaking.

 

Happy Tweening!