---
title: "Sequencer — Free Framer component · Best of Framer"
description: "Free Framer component · by Jeeth · Effects. Sequencer turns a Stack of images into a scroll-scrubbed sequence."
canonical: "https://framer.elliotli.dev/component/sequencer"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Sequencer

# Sequencer

Scroll-driven image sequence

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

![Sequencer preview image 1](https://framer.elliotli.dev/og/component/sequencer/c55f5548829193e0/1600x1200.jpg)

## Summary

Sequencer turns a Stack of images into a scroll-scrubbed sequence.

## Description

**Sequencer** turns a Stack of images into a scroll-scrubbed sequence. Drop hundreds of frames onto the canvas, wrap them in a Stack, connect that Stack, and the component plays them in order as the page scrolls.

It is built for product reveals, 3D turntables, process walkthroughs, and cinematic hero sections. Frames stay inside your Framer project. No external CDN required.

**What’s included:**

-   Connect Stack control
    
-   Viewport or full-page scroll trigger
    
-   Forward and reverse playback
    
-   Scrub speed
    
-   Cover / Contain / Fill
    
-   Scroll height
    
-   On-canvas HUD with live frame count
    
-   Natural sort by layer name or filename
    

**How to use:**

1.  Drop all frames onto the canvas.
    
2.  Select them and press **Shift + A** to wrap them in a Stack.
    
3.  Set every image inside the Stack to **Absolute**.
    
4.  Place Sequencer on the page and set width to **Fill**.
    
5.  In the properties panel, use **Connect Stack** and select that Stack.
    
6.  Set **Height** to control how long the sequence lasts (higher = slower).
    
7.  Preview and scroll.
    

**\[Note:** Covert all images to .webp for better performance.\]

**Best for:**

-   Product 360s
    
-   Scroll storytelling
    
-   Exploded-view or assembly sequences
    
-   Hero sections that feel like video without a video file
    

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

-   All · #2538

## Details

- **Author**: Jeeth
- **Published**: 2026-08-30
- **Updated**: 2026-11-06
- **Added**: 2026-08-30
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows