scroll-scrubbed-visual-sequence

Scroll-Scrubbed Visual Sequence

Turn one visual transformation into a responsive scroll instrument. Keep the page usable without motion and keep the renderer replaceable.

Define the sequence

Write the visual states before coding:

const sequence = {
  scrollVh: 280,
  frameCount: 96,
  fit: "contain",
  posterFrame: 0,
  reducedMotionFrame: 95,
  copyStops: [0, 0.42, 0.78]
};

Use one normalized value for every renderer:

const progress = Math.min(1, Math.max(0,
  (viewportTop - sectionTop) / (sectionHeight - viewportHeight)
));

Never make wheel delta, elapsed time, or autoplay the source of truth. Native scroll position must determine the exact visual state in both directions.

Choose the renderer

• Use video when the sequence is continuous, photographic, or expensive to render live. Encode frequent keyframes, preload metadata, reserve the aspect ratio, and coalesce currentTime writes in requestAnimationFrame.
• Use an image sequence when exact art-directed frames matter. Preload the current frame first, then nearby frames; never block first paint on the whole set.
• Use canvas for procedural drawing or compositing. Cap device pixel ratio at 2 and redraw only when progress changes.
• Use SVG or DOM for diagrams, product cards, interface states, and accessible text. Drive transforms, opacity, clip paths, and CSS variables instead of layout-heavy properties.
• Use WebGL only when depth, lighting, or a real 3D camera materially strengthens the idea. Provide a static poster and dispose resources.

Build the scroll stage

1. Keep the section in normal document flow and set its height from scrollVh.
2. Put the visual in a position: sticky stage sized to the viewport.
3. Keep copy and controls in a separate layer. Do not bake essential text into frames.
4. Map progress to the renderer with no implicit easing. Add optional smoothing after correctness is proven.
5. Refresh measurements after fonts and intrinsic media sizes settle.
6. Release the sticky stage cleanly before the next section and keep the footer reachable.