1.3 KiB

Raw Blame History

Concept: Scroll-Linked Animations

Purpose: Sync image sequences to scroll position for cinematic product reveals

Last Updated: 2026-01-07

Core Idea

Map scroll position to video frames. As user scrolls, play through image sequence like a scrubbing timeline. Creates illusion of 3D animation controlled by scroll.

Formula: scrollProgress (0→1) → frameIndex (0→N) → canvas.drawImage()

Essential Parts

Image sequence - 60-150 WebP frames from video/3D render
Sticky canvas - Fixed HTML5 canvas, always visible while scrolling
Scroll tracker - Framer Motion useScroll hook
Preloader - Load all frames upfront (prevents flicker)
Background match - Page BG = image BG (hides edges)

Minimal Example

const { scrollYProgress } = useScroll({ target: containerRef })
const frameIndex = useTransform(scrollYProgress, [0, 1], [0, 119])

useEffect(() => {
  ctx.drawImage(images[Math.round(frameIndex)], 0, 0)
}, [frameIndex])

Why canvas? 10x faster than swapping <img src>. DOM updates are slow.

examples/scrollytelling-headphone.md - Full code
guides/building-scrollytelling-pages.md - Implementation
lookup/scroll-animation-prompts.md - Generate sequences

Reference

Apple AirPods Pro - Production example

1.3 KiB Raw Blame History