ScrollFrames

ScrollFrames works like ScrollVideo, but its source is a numbered series of images, drawn to a canvas. There’s no video decoding, so every frame is exact and shows instantly once it has loaded.

import { ScrollFrames, Section } from "vidscroll";

export default function Example() {
  return (
    <ScrollFrames urls="/frames/train/{i3}.webp" count={87} length="300vh">
      <Section id="stills" start={0} end={0.4}>
        <h2>87 still images</h2>
      </Section>
      <Section id="water" fromFrame={50} toFrame={75}>
        <h2>Frames 50 to 75</h2>
      </Section>
    </ScrollFrames>
  );
}

When to use it

Use ScrollFrames when you already have frames, such as 3D renders or a product turntable, or need pixel-exact stills. For filmed footage or anything long, ScrollVideo downloads far less.

Pointing it at your images

count is the number of images. urls describes where they are, in one of three ways:

import { ScrollFrames } from "vidscroll";

export function Turntable() {
  return <ScrollFrames urls="/frames/frame_{i3}.webp" count={120} length="300vh" />;
}

Numbering starts at 0. If your files start at 1, use a function. With an array, set count to the array’s length.

Loading

Frames load in order, 12 at a time. The component starts following the scroll once the first frame and a tenth of the rest have loaded. Until a frame is there, the nearest loaded one is shown, and between two frames the next one fades in over the current one, so slow scrolling looks smooth even with few frames.

There’s no loading overlay, so the first frame should work as a still on its own. On high-density screens the canvas is drawn at up to twice the CSS size.

Length and sections

length works as in ScrollVideo. With the default "auto", the length comes from the frame count: count divided by fps (30 by default) gives a duration, at 40vh of scrolling per second. Setting length yourself is usually clearer.

Sections can use start and end, or frame numbers with fromFrame and toFrame. Hooks and --video-progress work the same as with a video.

Props

Related

• ScrollVideo: the same, with a video file.
• Section: ranges and --progress.