Alejandra Posted January 5 Share Posted January 5 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 Chrome Ttbxmsgwmo.mp4 Link to comment Share on other sites More sharing options...
GreenSock Posted January 5 Share Posted January 5 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? Link to comment Share on other sites More sharing options...
Alejandra Posted January 8 Author Share Posted January 8 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted January 8 Share Posted January 8 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now