ScrollTrigger pin jumps right to the end of container

[Alejandra]

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!

[Toso]

in this code you didnt actually put your tween inside the context so you need to add it inside the context and check if this works cuz im unable to check in sandbox also you can switch to useGSAP() hook 

 

 

https://github.com/greensock/react 

 

 

so your code will look like this 

 

 

const container = useRef();
useGSAP(() => {
    // gsap code here...
}, { scope: container }); // <-- scope is for selector text (optional)

 

 

and since you are using frameworks you can create your demos here much faster 

 

https://stackblitz.com/@GreenSockLearning/collections

 

 

[Alejandra]

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