Building a Pinned Scroll Narrative with GSAP and Vue
Scroll-driven storytelling is a staple of high-end product pages, but getting the sequencing, video sync, and cleanup right requires careful orchestration across DOM layout, GSAP timelines, and framework lifecycle hooks. This walkthrough surfaces the concrete decisions — track-level movement, opacity vs. autoAlpha, empty tweens for pacing — that turn a demo into a production-safe component.
A pinned scroll narrative locks the screen while the user scrolls, converting scroll distance into timeline progress. Cards slide to center, enlarge, and fade out to reveal layered detail sections — all within a single sticky container. The technique uses a tall container to create scroll room, a sticky stage to hold the viewport, and a single GSAP timeline scrubbed by ScrollTrigger. Card tracks move as a whole unit so each card can center itself against the stage; detail panels crossfade in sequence with empty tweens providing reading pauses. Video playback is synchronized to panel opacity, pausing and restarting as sections enter and leave the visible threshold. Cleanup relies on gsap.context() to revert all animations and ScrollTriggers when the Vue component unmounts, preventing timeline leaks in single-page apps.
The distinction between opacity and autoAlpha is a small API choice with outsized consequences for reverse-scroll behavior — a detail easily missed when generating code from AI.
Empty tweens are an underused GSAP pattern that decouple pacing from DOM changes, letting the scroll position control reading rhythm without extra markup.
Video sync logic that checks activeVideo before resetting currentTime prevents a jarring replay loop during scrub, a subtlety that separates polished scroll experiences from janky ones.
The author's reflection on AI-generated code is notable: the real work shifts from writing lines to understanding structure, verifying logic, and making precise timing adjustments — a skill set that remains firmly in the developer's hands.