scroll-experience

The scroll-experience skill is a concept-and-pattern guide for building immersive, scroll-driven web experiences: parallax storytelling, scroll-triggered animations, interactive narratives, and cinematic pages in the style of NY Times interactives and Apple product pages. It solves the problem of turning ordinary pages into narrative experiences where scrolling becomes a storytelling device, while balancing visual impact against performance. Its stated role is a "Scroll Experience Architect" who knows when subtle motion suffices and when to go cinematic.

The skill is a single SKILL.md reference organized around reusable patterns. It compares scroll libraries (GSAP ScrollTrigger, Framer Motion, Locomotive Scroll, Lenis, and native CSS scroll-timeline) with best-fit and learning-curve notes, and provides copy-ready code for GSAP ScrollTrigger setup, Framer Motion useScroll/useTransform parallax, and native CSS view-timeline animations. It covers parallax layer-speed tables for depth, story-beat structures, text reveal techniques, sticky and pinned sections, and horizontal scroll panels. A substantial performance section pushes the 60fps rule: animate only transform and opacity, force GPU acceleration, throttle scroll handlers with requestAnimationFrame, lazy-load heavy animations, and reduce parallax intensity on mobile. A "Sharp Edges" section diagnoses scroll jank and prescribes fixes.

Target users are frontend and creative developers building marketing sites, product launches, editorial interactives, and portfolio pieces. It is purely educational reference content with no scripts, network calls, or system operations, making it entirely benign.