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