GSAP ScrollTrigger pinning jumps to the end of the container

Hi! I'm having a bit of trouble with pinning in GSAP 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's 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(); }, []); But none of that works Thank you!