About Component
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 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
Keywords
process timeline, numbered steps component, scroll animation, step by step section, accordion timeline, animated connector line, staggered entry animation, hover reveal framer, progress steps, timeline component framer, interactive process flow, scroll highlight, paper glass theme, responsive timeline, onboarding steps, feature walkthrough, step reveal animation, cursor highlight, process section, milestone timeline
About Component
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 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
Keywords
process timeline, numbered steps component, scroll animation, step by step section, accordion timeline, animated connector line, staggered entry animation, hover reveal framer, progress steps, timeline component framer, interactive process flow, scroll highlight, paper glass theme, responsive timeline, onboarding steps, feature walkthrough, step reveal animation, cursor highlight, process section, milestone timeline
Ahmet Loca
