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

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

Thank you!!! That was the answer, I feel so stupid haha, thank you so much! ☺️

Hello, I'm a bit new to gsap, I know there's a similar thread to this one, and the same is happening to me, but I tried the solutions provided and it doesn't seem to work, unless I'm missing something. I'm using Nextjs 14 and I'm trying to pin an element and it jumps right to the end of the trigger and then it finally pins, not sure what I'm doing wrong, I've been searching and reading docs and I've tried other things, nothing is working 😔 Here is a simplified example on sandbox https://codesandbox.io/p/sandbox/serene-williamson-j86cy6 I've also tried this code for the useEffect: useEffect(() => { let ctx = gsap.context(() => {}, section); gsap.to(".maincontainer", { scrollTrigger: { trigger: ".maincontainer", start: "top top", end: "+=200", pin: ".titlePin", markers: true, } }) return () => ctx.revert(); }, []); Thank you!