---
title: "Roadmap Reveal — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Isaac Yi · Sections. Scroll-reveal milestones. No GSAP."
canonical: "https://framer.elliotli.dev/component/roadmap-reveal"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Roadmap Reveal

# Roadmap Reveal

Scroll-reveal milestones. No GSAP.

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

![Roadmap Reveal preview image 1](https://framer.elliotli.dev/og/component/roadmap-reveal/674f21e3725b3fd7/1600x912.jpg)

## Summary

Scroll-reveal milestones. No GSAP.

## Description

Building a roadmap section usually means a flat static list, or wiring up a scroll animation library just to make milestones fade in as visitors scroll.

Roadmap Timeline fixes this with one drop-in component. It watches your milestones with the browser's native IntersectionObserver and reveals each one with a clean CSS fade as visitors scroll — no GSAP, no ScrollTrigger, no framer-motion.

What you get:

\- Scroll-reveal milestones with color-coded status badges (Completed / In Progress / Planned — fully relabelable)

\- Fully panel-driven — add, remove, and edit unlimited milestones with no code

\- Custom colors for background, text, borders, and every status state

\- Adjustable list height, from a sidebar card to a full-width section

\- Zero layout shift — fixed-width card that never jumps as content updates

\- Static-render safe — animation auto-disables in Framer's canvas/export

Built for SaaS landing pages, product launches, crypto/Web3 roadmaps, and "about" or company-journey sections — anywhere you need to show progress, not just promise it.

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

-   All · #8338

## Details

- **Author**: Isaac Yi
- **Price**: $10.00
- **Published**: 2026-07-01
- **Updated**: 2026-07-01
- **Added**: 2026-07-01
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes