---
title: "Timeline Steps Pro — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Nima Zaeimzadeh · Sections. Animated vertical steps view"
canonical: "https://framer.elliotli.dev/component/timeline-steps-pro"
---

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

# Timeline Steps Pro

Animated vertical steps view

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

![Timeline Steps Pro preview image 1](https://framer.elliotli.dev/og/component/timeline-steps-pro/8c759dc2500826d2/1600x1138.jpg)

## Summary

Animated vertical steps view

## Description

### **✦ Give your milestones a dynamic edge.**

Present your process, history, or roadmap with a captivating scroll-driven vertical timeline. Featuring a glowing central progress line, animated arc-drawing number markers, and beautifully staggered content cards that fade into view. Fully responsive, deeply customizable, and ready to use in seconds. Make it completely your own with flexible controls for layout, styling, and motion :)

### ⚙ **What you can customize**

✦ Easily adapt every part of the component to match your own brand and style.

✦ Timeline items (Titles, Descriptions, optional Images)

✦ Title & Description typography (Font, Size, Weight, Color)

✦ Circle styling (Size, Background, Text color, Border width & color, Number font)

✦ Central line styling (Width, Base color, Active/Fill color)

✦ Content card styling (Background, Border width & color, Corner radius, Padding, CSS Shadow)

✦ Vertical & horizontal spacing between items

✦ Spring animation stiffness & damping

✦ Mobile breakpoint behavior

✦ Per-item image toggles

### 🎯 **Perfect for**

✦ Product roadmaps

✦ Company milestones

✦ Case studies

✦ Step-by-step guides

✦ Brand storytelling

✦ Portfolio showcases

✦ Process explanations

✦ Educational content

### 📱 **Responsive by default**

Optimized layouts for Desktop, Tablet and Mobile. On larger screens, items alternate elegantly left and right around the central line. On smaller screens, the layout seamlessly stacks into a single-column format with the circle on the left and content on the right—keeping your narrative clean and readable at every size.

### 🖱 **Included interactions**

✦ Scroll-driven central line fill

✦ Scroll-triggered circle arc drawing (left & right path animation)

✦ Smooth spring-powered physics

✦ `whileInView` card reveal with fade-up & blur-to-clear effects

✦ Spring scale-in animation for numbered markers

✦ Fluid damping for silky motion

✦ Instantly adapts to the Framer Canvas (animations disable in design mode for a stable editing experience)

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

-   All · #2103

## Details

- **Author**: Nima Zaeimzadeh
- **Price**: $10.00
- **Published**: 2026-09-05
- **Updated**: 2026-09-05
- **Added**: 2026-09-05
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove