Scroll Step Timeline is a clean, scroll-driven timeline for presenting processes, workflows, roadmaps, milestones, or step-by-step journeys.
As visitors scroll through the section, the vertical progress line fills along with the timeline. Each numbered step becomes active when it reaches the chosen viewport position, changing its circle, number, title, and description into the active state. A subtle halo also appears around the active step to make the current position easier to follow.
Features:
Scroll-driven active states
Animated vertical progress line
Numbered timeline steps
Active step color transitions
Subtle active-step halo
Custom step titles and descriptions
Adjustable active viewport position
Custom colors and typography
Adjustable spacing and max width
Custom circle and line sizing
Framer static/canvas support
Fully Customizable:
Make the timeline fit your brand and content without editing the code. Change the entire visual system from Framer's property panel, from the accent color and typography to the spacing, circle size, line width, and active-state behavior.
Customize:
Eyebrow and main heading
Number of steps
Step titles and descriptions
Background and accent colors
Active and muted text colors
Timeline line color
Heading, title, description and number fonts
Maximum content width
Top and bottom spacing
Gap between steps
Heading and content spacing
Active viewport trigger
Circle size and radius
Circle border width
Timeline line width
How It Works:
The timeline tracks the visitor's scroll position through the steps. As a step reaches the selected active point in the viewport, its numbered circle fills with the accent color and the related text becomes active. At the same time, the progress line grows down the timeline to show how far the visitor has moved through the process.