Progress Timeline

A timeline component built for Framer. Live preview below — interact with it directly before you buy.

Buy this component — $8 Preview Get All-Access instead

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.

Features

→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
→Works out of the box — no setup, no dependencies

Use Cases

→Agency & studio process pages
→SaaS onboarding & feature walkthroughs
→Product roadmap & release timeline sections
→Portfolio & personal branding websites
→Startup landing pages & pitch decks
→Service & pricing flow sections
→UX case study & presentation pages
→Architecture & interior design process
→Healthcare & wellness service steps
→Education & course curriculum layouts

Best value

Get every component with All-Access — $129

Progress Timeline and all 122 others, current and future.

Get All-Access

More Timeline

Timeline Section