Timeline Steps Pro

✦ 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)