Ironessence

This was, indeed, the issue! What I've done now is esentially I've used the article you provided as inspiration, and before I had a useEffect without cleanup & context, that simply said gsap.timeline( animate here etc.). Thank you for your help! Now, the useEffect looks like this (for other who run into the same issue and need a quick fix) : useEffect(() => { let ctx = gsap.context(() => { gsap.timeline({ scrollTrigger: { trigger: ideRef.current, start: "top top", end: '+=1000', scrub: true, pin:true, anticipatePin: 1, markers: true, } }) }, headerRef) return () => ctx.revert(); }, [])

I've been having a lot of issues with the pin functionality on React. Mainly, I'm using the exact code from this CodePen, with npm install gsap@latest. (3.11.4). What it does is, when it reaches the "start" mark, it will automatically take the element and place it and the position specified first in the "end" string. For example: start: 'top top', end: '+=1000', when the element reaches 'start', it will automatically go down by 1000. Which is faulty. On codepen, changing the version of the gsap package does not affect anything, it still works. in my React application, same code from codepen behaves differently on 3.11.4 vs. 3.9.1. For now, I will keep using 3.9.1 even tho it's old. However, I think somebody might want to look into that. Hope it helps some people. Video: Please observe the behavior of the "Nav" element on the two gsap versions.