Scroll Sequences

Scroll Sequences lets you scrub through image or frame sequences using scroll.

Scroll Sequences lets you scrub through image or frame sequences using scroll. It’s ideal for showcasing 3D renders, product rotations, and frame-by-frame animations with smooth, responsive control. Instead of autoplaying or looping, motion is driven by scroll position—creating a direct, tactile connection between user input and visual feedback. How It Works The component maps scroll progress to a sequence of images, displaying one frame at a time based on how far the user has scrolled. This makes it perfect for: 3D object rotations exported as image sequences Product spins and explainer visuals Video frames converted to images High-fidelity, scroll-driven storytelling Properties & Configuration Images Upload up to 200 images to form your sequence. Images are played in the order they appear in the list. Recommendations Use evenly spaced frames for smooth motion (60–120 images works well for most 3D rotations) Keep image dimensions consistent to avoid layout shifts Export frames with optimized file sizes to improve performance Scroll Behavior Choose how the sequence responds to scroll input: Viewport The sequence is scrubbed based on the component’s progress through the viewport, from the moment it enters until it leaves. This mode is best suited for a single, continuous scroll interaction , typically when the sequence is the main focus of the page. Recommended use cases Fixed or sticky-positioned visuals Full-page hero animations One-scroll product reveals Experiences where the animation plays once from start to end Scroll Section The sequence is tied to a specific scroll section using a Section ID. Best for Long-scrolling pages Narrative or step-based layouts Controlling animation timing precisely Tip: Ensure the section has enough scroll height to allow smooth scrubbing across all frames. Smoothing Controls how smoothly frames transition as the user scrolls. Low values (0.01–0.2): Very responsive, direct frame changes Medium values (0.3–0.6): Balanced and natural High values (0.7–1): Softer, more cinematic motion Recommendations Use lower values for technical or interactive visuals Use higher values for product showcases and cinematic effects Preload Images Enable or disable preloading of all frames. On: Loads all images upfront for the smoothest playback Off: Loads images progressively to reduce initial load time Recommendations Turn On for short sequences or hero sections Turn Off for long pages or large image sets Best Practices Export 3D sequences from tools like Blender at consistent angles and lighting Keep scroll sections tall enough to avoid rushed animations Test on both desktop and mobile to fine-tune smoothing values Use compressed images (WebP recommended) for better performance Ideal Use Cases 3D product spins and rotations Scroll-driven product storytelling Interactive hero sections Frame-by-frame video animations High-end marketing and portfolio sites

Turn scrolling into storytelling