Milestone Timeline is a beautifully animated roadmap component built for Framer.
Designed to be mobile-friendly and fully responsive, it adapts seamlessly across devices while keeping your milestones clear and engaging.
Flip Layout: Users now have full control over which content goes on top or the bottom of the timeline arc. Making it extremely flexible to fit the content and project.
Width: You can now control how wide the bottom text content of each step should be, or leave it at Auto, giving you more control over your layout limitations.
Link: Added support for inserting links to each timeline step, making it even more interactive and informative. It includes all styling options, such as Font, Color, Link Label, and Decoration.
Smooth horizontal animation with optional auto-loop playback.
Supports both SVG icons and emojis for each step.
Mobile-first design that adapts effortlessly to all screen sizes.
Clear year/label display for structured storytelling.
Flexible enough for roadmaps, project timelines, or user journeys.
Fine-tune the timeline to match your brand and project needs:
Add unlimited timelines with an unlimited number of steps per timeline.
Set the default active step for the playback starting point.
Adjust arc width and angle between steps.
Toggle lines between steps and define boundary lines.
Enable/disable auto-loop animation with custom interval settings.
Align vertically (Top / Center / Bottom).
Customize fonts, active/inactive text colors, and line colors.
Control placeholder line color and background fill.
And much more.. (Watch the demo video)
Getting started is simple:
Copy & paste the component into your canvas.
Resize it as needed.
Add data to the Timeline Data property, including time and steps for each timeline.
For each step, upload a custom SVG icon or use an emoji.
Add the content/description for the step.
Repeat to create as many timelines and steps as you like.
Copy the URL and paste it into your Framer project to import it.
Aviral Lakhanpaul
