selector · staggerA diagram that assembles itself as you scroll is the clearest way to explain a multi-step process, because the reader meets one step at a time instead of a finished wall of boxes. The trick that makes it work is what stays still: fills, labels and icons are static, so the chart is legible even before it animates and for anyone who never scrolls. Only the borders and arrows are on the timeline.
Box borders and arrow connectors draw in sequence across a 4-step checkout process. Static fills and emoji keep the diagram readable before animation starts.
<ScrollDraw
easing="ease-out" speed={1.1}
selector=".ink" stagger={0.18} once
>
<svg>
{/* Static: filled boxes + emoji + step labels */}
<rect x={8} fill="#f0f4ff" />{/* Cart */}
<rect x={82} fill="#fff8f0" />{/* Shipping */}
{/* .ink elements animate: borders + arrows */}
<rect className="ink" x={8} stroke="#5865F2" />
<path className="ink" d="M 70 70 L 82 70" {/* arrow */} />
</svg>
</ScrollDraw>npm i svg-scroll-draw
MIT licensed, zero runtime dependencies. Every API is a separate entry point, so you only ship what you import. Full API reference →
Architecture diagram connections
Draw the wires between services as the reader scrolls an architecture diagram. Boxes stay readable throughout; only the connections animate. Copy-paste code.
Map route tracing on scroll
Trace a delivery route across a map as the page scrolls — the journey-line effect used on logistics and travel sites. No mapping library required.