About 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 72 hours. 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.
