Snapping Scrolltigger in React with pinned content and animated components

[Alejandra]

Hello! I'm reading docs, searching examples and trying to make an animation work, almost everything is working except for one thing.
I'm working on a project in ReactJs, It's a home page and it has inside a four section scroll animation in which it has 2 pinned elements  (a text and pagination dots which should change when entering each section).
Each section is a component with their correspondent animation inside.

I tried replicating the project into a sandbox example but it breaks worse than in the actual project I don't know why, I tried to copy and paste and modify enough for it to work by itself: https://codesandbox.io/p/sandbox/flamboyant-ritchie-lyh7nw
If this example is not enough I'll try to improve it.

Right now this is the real project homepage staging without the snapping part
It's almost working but the snapping doesn't work, here in this video is what is happening when I try exactly what is on the sandbox for it to snap (I'm not sure why the pinning is working perfectly on the real project and not on the sandbox right now), it goes right to the top

Thank you


Edit: Now the codesandbox is kinda working better (except the pagination dots animation), I don't understand why is not working in the real project, by any chance can you spot an error in the sandbox code? or it has to be something on the real project code? Thank you
 

[GreenSock]

I'm having a hard time understanding exactly what you're asking, but if you're simply trying to make it kinda snap to individual sections, why not use CSS scroll snapping? 

[Alejandra]

I tried it before, but is not working. Because I only want for it to do that only in a section of the homepage, it gets messy, it just adds another scrollbar and it doesn't even work correctly

[Rodrigo]

Hi,

 

Maybe this demo can help:

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

 

Just navigate to the Layers Section on the router.

 

Happy Tweening!