Jump to content
Search Community

Snapping Scrolltigger in React with pinned content and animated components

Alejandra test
Moderator Tag

Recommended Posts

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

 

Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...