GSAP ScrollTrigger pin: true Nearly Broke My Portfolio — Here's What I Learned

The Bug That Took 3 Days to Find Last week, I shipped an update to my portfolio site. Everything looked perfect on my dev machine. Then a friend texted me a screenshot from their phone: "Bro... why is PROJECTS showing while I'm still reading your work history?" He was right. The PROJECTS section transition was appearing on top of the Experience section — before users had finished scrolling through my work history. On mobile, it was even worse: the text was fully visible over my last two job entries. I'd been staring at this site for 6 hours and never noticed. Classic developer blindness. The Architecture My portfolio uses a scrollytelling layout: Profile → About → Experience → SectionTransition("PROJECTS") → Portfolio The SectionTransition component is a full-viewport kinetic text reveal using GSAP ScrollTrigger: // KineticType.jsx — The problem code const tl = gsap.timeline({ scrollTrigger: { trigger: container, start: "top top", end: "+=100%", pin: true, // ← This is the culprit scru