17 Scroll Roadmap

What it does

Scroll Roadmap turns a list of milestones into a timeline that draws itself as visitors scroll. The line fills in step with the page, cards pop in as it reaches them, and the line tells the story — solid up to the last shipped or in-progress milestone, dashed for everything still planned.

A compact summary ("3 of 7 shipped · 43%") and a clickable status legend sit on top, so visitors see progress at a glance or focus on Planned items.

Customizable properties

• Milestones — date, title, description, status, optional emoji and image

• Orientation — vertical or horizontal

• Alignment — alternate or one side (auto one-side on phones)

• Animation — On Scroll or On Enter

• Node style — check dot, ring or number

• Summary & Legend on/off, line width, node size, spacing

• Card fill, border, radius, shadow · colors · status labels and colors · fonts

Why this component

• Status-aware line: solid where you've delivered, dashed where you're heading.

• Progress summary and status filter built in — no extra components.

• No animation libraries, finished state on the canvas, respects reduced motion, pauses off-screen.

Need help?

Email hello@brandingupstudio.com — we usually reply within 1 business day. Custom edits are available from $75/hr.

Built with code but fully customizable via property controls. Unlink is not provided so we can keep delivering updates.