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.
Draggable: You can now let users navigate the timeline by dragging it with the mouse pointer. This interaction automatically switches to swipe-left/right behaviour on mobile devices.
Keyboard Navigation: Option to use keyboard arrow keys for navigation.
Compact Mode: Make your timeline compact with just a single click, helping you display it on mobile.
Animation Curve: Choose from a list of 7 different animation curves, from Ease-in-out to Bounce.
Pause on Hover: Get the timeline to pause when a user hovers over it.
The alignment menu is now a vertical segmented menu, with relevant icons, instead of a dropdown.
Max. value for the Angle property has been increased to 5 deg.
Now you can set the Boundary Line Distance to 0.
Auto-loop interval now supports 0.1 step values.
Time text, Description text, and Step line properties are now grouped under Time Text Props, Description Text Props, and Step Line Props, respectively.
Reordered the properties to suit their usage.
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).
Customise 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
