About Scroll Steps

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.

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.