---
title: "Progress Timeline — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Ahmet Loca · Sections. Progress Timeline ProgressTimeLine is a scroll-animated, numbered process timeline for Framer."
canonical: "https://framer.elliotli.dev/component/progress-timeline"
---

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

# Progress Timeline

Animated numbered process timeline

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

![Progress Timeline preview image 1](https://framer.elliotli.dev/og/component/progress-timeline/89c6d48d7d7dd053/1600x1200.jpg)

## Summary

Progress Timeline ProgressTimeLine is a scroll-animated, numbered process timeline for Framer.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**✦ Get everything for one price:** [**https://ahmetloca.dub.link/allcomponents**](https://ahmetloca.dub.link/allcomponents)

## **About Progress Timeline**

ProgressTimeLine is a scroll-animated, numbered process timeline for Framer. Steps slide in with staggered entry animations as the section enters the viewport, the most visible step auto-highlights on scroll, and connector lines progressively fill with your accent color. Choose between paper and glass themes, vertical or horizontal layout, and toggle hover-reveal mode for a minimal look that unfolds on interaction.

Staggered slide-in entry — each step animates in with a 120ms cascade Scroll-active highlight — most visible step auto-activates as you scroll Progressive connector fill — accent line draws in step-by-step Number glow & ripple ring — optional pulse animation on active circle Paper & glass themes — warm off-white or dark frosted surface Vertical & horizontal layout — auto-collapses to vertical under 768px Hover reveal mode — description text slides up only on interaction Demo Mode — live preview of gap, speed, theme and animation toggles Custom icons per step — upload image or choose from built-in icon set Full property controls — accent color, fonts, gap, text width and more.

**Use Cases**

Agency & studio process pages

SaaS onboarding & feature walkthroughs

Product roadmap & release timeline sections

Portfolio & personal branding websites

Startup landing pages & pitch decks

Architecture & interior design process

Healthcare & wellness service steps

Education & course curriculum layouts

**Keywords**

process timeline, numbered steps component, scroll animation, step by step section, accordion timeline, animated connector line, staggered entry animation, hover reveal, progress steps, timeline component, interactive process flow, scroll highlight, paper glass theme, responsive timeline, onboarding steps, feature walkthrough, step reveal animation

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

-   All · #1639

## Details

- **Author**: Ahmet Loca
- **Price**: $4.00
- **Published**: 2026-07-05
- **Updated**: 2026-09-30
- **Added**: 2026-07-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