Scroll Steps — Scroll timeline with smooth animations.

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.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.