---
title: "Scroll Steps — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Sections. What is Scroll Steps?"
canonical: "https://framer.elliotli.dev/component/scroll-steps"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Scroll Steps

# Scroll Steps

Scroll timeline with smooth animations.

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

![Scroll Steps preview image 1](https://framer.elliotli.dev/og/component/scroll-steps/e52536b2f72ebb6c/1600x1200.jpg)

## Summary

What is Scroll Steps?

## Description

## What is Scroll Steps?

Scroll Steps is a high-performance vertical timeline component that activates each step as the user scrolls. Steps smoothly highlight with continuous opacity, scale, and progress line animations. Each step supports a title, description, label, stat, and a dedicated image or video that crossfades in a side panel. Ideal for process breakdowns, product tours, onboarding sequences, and case study timelines.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Buttery-smooth scroll animation powered by a continuous RAF engine — no discrete snapping, every pixel of scroll drives fluid visual transitions
    
-   Crossfading media panel with support for both images and video (MP4, WebM, MOV) per step, with a live step counter overlay
    
-   Cursor-reactive border glow and ambient glow effects on the media panel, matching the selected theme accent colour
    
-   Animated dot pulse on the active timeline node with a gradual progress line fill between steps
    
-   Fading progress bar at the viewport bottom that gracefully disappears as the timeline completes
    
-   6 built-in colour themes (Dark, Light, Indigo, Emerald, Rose, Amber) plus a fully customisable Custom mode with 5 colour controls
    
-   Independent font controls for every text element — title, description, label, stat value, stat label, and media counter
    
-   Responsive layout that stacks to a single column on mobile viewports
    
-   Transparent background by default for seamless integration into any page design
    

## Controls inside Framer

### Steps

-   Label
    
-   Title
    
-   Description
    
-   Stat value
    
-   Stat label
    
-   Image (responsive)
    
-   Video URL
    

### Theme

-   Theme preset (Dark, Light, Indigo, Emerald, Rose, Amber, Custom)
    
-   Custom Colors: Text, Text Muted, Accent, Inactive Dot, Line
    

### Layout

-   Scroll per Step (100–600px)
    
-   Step Gap (16–80px)
    

### Typography

-   Title Font
    
-   Description Font
    
-   Label Font
    
-   Stat Font
    
-   Stat Label Font
    
-   Counter Font
    

### Visibility

-   Media Panel
    
-   Border Glow
    
-   Cursor Glow
    
-   Dot Pulse
    
-   Progress Bar
    
-   Labels
    
-   Descriptions
    
-   Stats
    

## Best use cases

-   SaaS landing pages explaining a multi-step process, onboarding flow, or product methodology
    
-   Agency and portfolio sites showcasing project phases, delivery timelines, or case study breakdowns
    
-   Product pages walking users through features, setup guides, or upgrade paths with supporting visuals
    
-   Startup pitch pages presenting company milestones, roadmap stages, or growth metrics with contextual media
    

Every property is designed to adapt — toggle off what you do not need, match your brand fonts per element, and let the scroll engine handle the rest.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

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

-   All · #6633

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-04-21
- **Updated**: 2026-06-13
- **Added**: 2026-04-08
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes