GSAP DrawSVG costs $150/yr. Vivus has no scroll integration. Framer Motion doesn't do stroke-dashoffset at all. svg-scroll-draw does one thing perfectly: animates SVG paths as you scroll. Zero dependencies. ~3 KB gzipped. One line of code. Works natively with React, Vue, Svelte, Solid, Angular, Astro, and vanilla JS — no wrappers needed for each framework. Live playground included. Try it before you install it.
Hey Product Hunt! 👋
I built svg-scroll-draw because I kept reaching for GSAP just
to animate an SVG logo on scroll — 40 KB of library for what
should be 3 lines of code.
The problem: GSAP DrawSVG is paywalled. Vivus requires you to
wire up your own scroll logic. Framer Motion doesn't do
stroke-dashoffset at all.
So I built the missing piece — a library that does exactly one
thing: animates SVG paths as you scroll. Zero dependencies.
~3 KB gzipped. One line of code.
It works natively with React, Vue, Svelte, Solid, Angular,
Astro, and vanilla JS — no adapters, no boilerplate.
The best way to see it → try the live playground:
svg-scroll-draw.vercel.app/playground
Paste any SVG and watch it draw on scroll. No install needed.
Happy to answer any questions — and would genuinely love
feedback on what's missing or broken. 🙏
Report
No reviews yetBe the first to leave a review for svg-scroll-draw