Scroll Sequences
Scroll-controlled frame sequencing for interactive visuals. Easily display 3D renders, product spins, or video frames with smooth motion.
Made with Workshop
Build your own component with AI
Scroll-controlled frame sequencing for interactive visuals. Easily display 3D renders, product spins, or video frames with smooth motion.
Made with Workshop
Build your own component with AI
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.
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
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
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.
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
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
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
3D product spins and rotations
Scroll-driven product storytelling
Interactive hero sections
Frame-by-frame video animations
High-end marketing and portfolio sites
