Craft Immersive Scroll-Driven Web Experiences

Builds immersive scroll-driven web experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic pages in the style of NY Times interactives or Apple product pages - treating scroll as a narrative device rather than plain navigation, while balancing visual impact against performance and accessibility.

Use this skill when planning scroll-triggered animations, parallax storytelling, sticky or pinned sections, horizontal scroll panels, or scroll-based product/story experiences. Not a fit for 3D/WebGL work (routes to a 3D-web-experience skill), general frontend framework implementation, or pure visual design without scroll behavior - these route to their own dedicated skills.

Covers a scroll-animation tool stack (GSAP ScrollTrigger for complex animation, Framer Motion for React, Locomotive Scroll and Lenis for smooth scrolling, native CSS scroll-timeline for simple cases) with working code for GSAP's scrub-linked animations, Framer Motion's useScroll/useTransform hooks, and 2024+ native CSS scroll-driven animations. Parallax storytelling assigns layer speeds (background 0.2x through floating elements 1.2x) to create depth, structures narratives into five story beats (hook, context, journey, climax, resolution), and covers text-reveal techniques. Sticky sections are implemented via CSS position: sticky or GSAP pinning, including a horizontal-scroll-section pattern for product walkthroughs and image galleries.

Performance guidance enforces a 60fps rule (animate only transform/opacity/filter/clip-path, never layout-triggering properties like width or margin), lazy-loads heavy animations via ScrollTrigger's onEnter/onLeave, and reduces parallax intensity on mobile. Documents four sharp edges with fixes: scroll jank from animating the wrong properties or unthrottled scroll listeners, parallax breaking on iOS/Android (fixed via mobile detection, reduced motion range, and -webkit-overflow-scrolling), inaccessible scroll experiences (fixed with prefers-reduced-motion media queries and keyboard-navigable sections), and critical content hidden below animations (fixed via above-the-fold key content and progressive enhancement). Five validation checks flag missing reduced-motion support, unthrottled scroll events, layout-property animation, missing will-change, and scroll hijacking.

Built on GSAP with the ScrollTrigger plugin, Framer Motion for React projects, and optionally Locomotive Scroll or Lenis for smooth-scroll base behavior, with native CSS animation-timeline: view()/scroll() as a lightweight 2024+ alternative; debugged via GSAP's marker mode and Chrome DevTools' Performance and Rendering panels.

Frontend developers and interactive designers building cinematic, story-driven web pages who need scroll animations that hit 60fps, work on mobile, and remain accessible - rather than a scroll experience that looks impressive on desktop but janks on phones or breaks for reduced-motion and keyboard users.

gsap.to('.element', {
  scrollTrigger: { trigger: '.element', start: 'top center', end: 'bottom center', scrub: true },
  y: -100, opacity: 1,
});