selector · strokeColorRoute tracing is the effect every logistics, travel and delivery site reaches for, and it is usually built on a mapping SDK far heavier than the animation itself. If the route is an SVG path, none of that is needed. The map, street names and distance badge stay static; only the route line advances, so the reader follows the journey at their own scroll speed.
A delivery route traces itself across a city block map — warehouse to customer. City blocks, street names and the distance badge are static; only the route line animates.
<ScrollDraw
easing="ease-in-out" speed={0.75} once
selector=".ink"
strokeColor={['#fbbf24', '#ff90e8']}
>
<svg>
{/* Static: city blocks, street labels, distance badge */}
{/* Static: start/end markers */}
{/* Animated: route path only */}
<path className="ink"
d="M 44 175 L 44 132 L 90 132…"
stroke="#fbbf24" strokeWidth="4" />
</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 →
Flowchart that draws on scroll
Draw a flowchart step by step as the reader scrolls: boxes, then connectors, in sequence. Keeps the diagram readable before it animates. Copy-paste code.
Signature handwriting animation
Make a signature write itself as the page scrolls — the classic handwriting effect in a few lines of SVG and one function call. No GSAP, no canvas.