Milestone Timeline

Milestone Timeline is a beautifully animated roadmap component built for Framer. Perfect for product launches, feature roadmaps, project milestones, or storytelling. Designed to be mobile-friendly and fully responsive, it adapts seamlessly across devices while keeping your milestones clear and engaging.

What Makes It Stand Out

• 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.

Customisations

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.

Usage

Getting started is simple:

1. Copy & paste the component into your canvas.

2. Resize it as needed.

3. Add data to the Timeline Data property, including time and steps for each timeline.

4. For each step, upload a custom SVG icon or use an emoji.

5. Add the content/description for the step.

6. Repeat to create as many timelines and steps as you like.