---
title: "MilestoneTimeline  — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Russet Supply · Sections. Interactive horizontal timeline with arc"
canonical: "https://framer.elliotli.dev/component/milestonetimeline"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/MilestoneTimeline

# MilestoneTimeline

Draggable Ruler Timeline

[View on Framer](https://framer.com/marketplace/components/milestonetimeline/?via=elliot-li)

![MilestoneTimeline  preview image 1](https://framer.elliotli.dev/og/component/milestonetimeline/d112a62b600123d7/1600x1200.jpg)

## Summary

Interactive horizontal timeline with arc

## Description

Milestone Arc Timeline lets you showcase a sequence of events or milestones on a horizontal ruler with smooth drag and scroll interactions. Each milestone has a year/label, title above the ruler, and a description that animates in at the center bottom of the component, keeping your story readable even on dense timelines.

### Key features:

-   Arc‑shaped ruler with dynamic ticks
    
-   Center needle for active milestone
    
-   Drag, scroll, and autoplay
    
-   Animated description block
    
-   Fully configurable typography
    
-   Layout and density controls
    
-   Edge vignette fade
    

### Where can be used:

-   SaaS and product companies
    
-   Agencies and studios
    
-   Startups and tech brands
    
-   Education, courses, and cohorts
    
-   Events and conferences
    

### Timeline Content:

-   Milestones array: edit year/label, title, and description for each milestone
    
-   Tick Height: control maximum tick height at the center
    
-   Arc Depth: change how curved the tick arc is (flat to strong curve)
    
-   Tick Weight, color, needle color, needle's width, and glow.
    
-   Year Color, weight, tracking, and text size etc
    
-   Title Size, color, and weight.
    
-   Description text size, color, font family, weight etc
    
-   Background: component background color
    
-   Vignette Color and width
    
-   Auto Play: enable or disable autoplay
    
-   Speed (s): control autoplay interval in seconds
    
-   Loop toggle, drag toggle, and scroll whell toggle
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-jhrqwypc-NAyQgRvPQCh05gFOfRQRT8ck7Pa7XG)

## Rank history [How rankings work →](/terms#rankings)

-   All · #563

## Details

- **Author**: Russet Supply
- **Price**: $5.00
- **Published**: 2026-06-05
- **Updated**: 2026-11-04
- **Added**: 2026-05-16
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove