Scrollframes

Scrollframes lets you scrub through image or frame sequences using scroll. Perfect for 3D renders, product rotations, and frame-by-frame animations with smooth, responsive control.

Instead of autoplaying or looping, motion follows scroll position, creating a direct, tactile link between user input and visuals.

How It Works

The component maps scroll progress to your image sequence, showing one frame at a time based on how far the user has scrolled.

Images

Upload up to 200 images. They play in the order they appear in the list.

* 60–120 evenly spaced frames work well for most 3D rotations

* Keep image dimensions consistent to avoid layout shifts

* Use compressed images (WebP recommended)

Scroll Behavior

1. Viewport: the sequence plays from the moment the component enters the viewport until it leaves. Best for sticky visuals, full-page hero animations, and one-scroll product reveals.

2. Scroll Section: the sequence is tied to a specific section via a Section ID. Best for long pages, narrative layouts, and precise timing control.

Tip: Give the section enough scroll height for smooth scrubbing across all frames.

Smoothing

* Low (0.01–0.2): very responsive, direct frame changes

* Medium (0.3–0.6): balanced and natural

* High (0.7–1): softer, more cinematic motion

Use lower values for technical visuals, higher ones for product showcases.

Preload Images

* On: loads all frames upfront for the smoothest playback. Best for short sequences and hero sections.

* Off: loads frames progressively to reduce initial load time. Best for long pages or large image sets.

Best Practices

* Export 3D sequences (e.g. from Blender) with consistent angles and lighting

* Keep scroll sections tall enough to avoid rushed animations

* Test on desktop and mobile to fine-tune smoothing

Ideal For

3D product spins, scroll-driven storytelling, interactive hero sections, frame-by-frame video animations, and high-end marketing and portfolio sites.