---
title: "Scrollframes — Free Framer component · Best of Framer"
description: "Free Framer component · by Cristian Mielu · Interactive. Scroll Sequences lets you scrub through image or frame sequences using scroll."
canonical: "https://framer.elliotli.dev/component/scrollframes"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Scrollframes

# Scrollframes

Turn scrolling into storytelling

[View on Framer](https://framer.com/marketplace/components/scrollframes/?via=elliot-li)

![Scrollframes preview image 1](https://framer.elliotli.dev/og/component/scrollframes/52b7e14f72d1904f/1600x1200.jpg)

## Summary

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

## Description

**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:

1.  **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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-agcz8fuq-nYr9P4YhBvagv0NMveXtf1AA4pZDgD)-   **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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-agcz8fuq-X6Akz2kch5JYSjYjGmyvJsTyHtSGuY)

**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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #226

## Details

- **Author**: Cristian Mielu
- **Published**: 2026-01-12
- **Updated**: 2026-10-28
- **Added**: 2026-01-01
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step