---
title: "Vertical Timeline — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sobakhul Munir Siroj · Sections. Vertical Timeline Pro – Animated Milestones & Journey Tracker for Framer Showcase progress and achievements with clarity and style."
canonical: "https://framer.elliotli.dev/component/vertical-timeline"
---

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

# Vertical Timeline

Animated vertical timeline for stories

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

![Vertical Timeline preview image 1](https://framer.elliotli.dev/og/component/vertical-timeline/6923f6b5431cd7c9/1600x1200.jpg)

## Summary

Vertical Timeline Pro – Animated Milestones & Journey Tracker for Framer Showcase progress and achievements with clarity and style.

## Description

## Vertical Timeline Pro – Animated Milestones & Journey Tracker for Framer

Showcase progress and achievements with clarity and style.**Vertical Timeline Pro** helps designers display milestones, journeys, and chronological stories in a clean, modern, and highly visual format. Scroll-triggered animations add delight while keeping visitors engaged throughout the narrative. Ideal for personal portfolios, company story pages, events, product evolution sections, and onboarding journeys.

[**Live Preview**](https://vertical-timeline.framer.website/)

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-x99n1r9z-Xi61ZxiXPiBH7N2r6BGi4xsa7MgA6w)

### Key Features:

-   Add unlimited timeline items through the Properties Panel
    
-   Editable **date**, **title**, **description**, and optional **icon/image**
    
-   Scroll-activated animations (fade up, slide right, scale in) with duration controls
    
-   Toggle between **single-column** or **alternating** item layouts
    
-   Flexible card width sizing: **fixed, fit content, & fill**
    
-   Customize spacing between items, alignment, and vertical line style
    
-   Controls for line color, thickness, dotted/solid style
    
-   Full typography styling: font, size, weight, and color
    
-   Optional badges to highlight featured milestones
    
-   Responsive design optimized for desktop → mobile
    
-   Lightweight animation for smooth scrolling experience
    

### Perfect For:

-   Designer & developer portfolios
    
-   Brand storytelling and about pages
    
-   Startup evolution timelines
    
-   Case studies and project journeys
    
-   Event and roadmap presentations
    

### Create Your Own Style:

Easily adjust every detail using Framer’s Properties Panel — align visuals with any brand aesthetic, from minimal and elegant to bold and expressive. No code required.

If you need help or run into any issues, feel free to reach out at: [sobakhul.munir527@gmail.com](mailto:sobakhul.munir527@gmail.com)

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

-   All · #2925

## Details

- **Author**: Sobakhul Munir Siroj
- **Price**: $5.00
- **Published**: 2026-01-12
- **Updated**: 2026-03-04
- **Added**: 2026-01-01
- **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