stagger · ease-outThe handwriting effect is the purest demonstration of scroll-driven path drawing: a single continuous path, drawn at the speed the reader scrolls. It works because a signature is already one long stroke, so the dash offset maps directly onto the pen travelling across the page. The one thing worth getting right is easing — a linear draw reads mechanical, while ease-out lands the way a hand actually lifts.
CEO signature draws on scroll with a staggered underline flourish — label, printed name and date are static context. Looks like ink drying on a real document.
<ScrollDraw
easing="ease-out" speed={0.6}
stagger={0.35} once
>
<svg>
{/* Static: "Authorized Signature" label, name, date */}
{/* Animated path 1: cursive signature */}
<path d="M 18 90 C 14 62…" stroke="#111" strokeWidth="2.2" />
{/* Animated path 2: underline flourish (starts after sig) */}
<path d="M 12 112 C 90 122…" stroke="#ff90e8" />
</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 →
Logo reveal on scroll
Draw an SVG logo stroke-by-stroke as the user scrolls, then flood it with brand colour on completion. Copy-paste React code, ~10 KB, no GSAP.
Headline text reveal on scroll
Split a headline into words or characters and stagger them in on scroll. A 2.5 KB alternative to GSAP SplitText, with accessible markup.