https://framer.com/m/Timeline-vONb.js
Io / Enhancements / MilestoneTimeline
MilestoneTimeline
MilestoneTimeline lays a run of milestones along a wide arc, each one holding its own steps, and moves the active marker along that arc as the reader picks a point.
Examples
Live specimens for every control the component exposes.
Default
Milestones come from the Manual array — a time label plus a list of steps, each with an icon and a line of copy. The specimens on this page carry sample content so the shape is visible; swap in your own.
Arc width
circleWidth is the radius of the arc the markers sit on, from 1000 to 10000 pixels. Small values curve hard, large values read almost flat.
arc 1500
arc 3500 (default)
arc 7000
Motion and state
enableAnimation steps through the milestones on its own at animationInterval seconds. defaultActiveStepIndex picks which one is lit when the page loads.
auto-loop on
auto-loop off
second step active
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for MilestoneTimeline
A history, roadmap or process needs to read as one continuous run.
Each milestone carries several steps rather than a single line.
The section should idle through its own milestones unattended.
Type and line colours need to be set per state, active against inactive.
Reach for something else
The entries are a plain list with no ordering in time — use a stack.
The data lives in the CMS — this reads from its own array or JSON.
You need a Gantt or dated chart — use ChartX.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.