GSAP DrawSVG Alternative · May 2026 · 6 min read
GSAP DrawSVG is powerful, and since 2025 it's free for everyone — so this isn't a price argument. It does still cost you ~40 KB, three packages to register, and boilerplate in every framework. Here's a complete comparison, side-by-side code, and a migration guide.
svg-scroll-draw
~10 KB
gzipped
GSAP stack
~40 KB
gzipped
svg-scroll-draw
MIT
license
GSAP DrawSVG
Paid
commercial
At a glance
svg-scroll-draw
GSAP DrawSVG
Licensing
It is not money. GSAP is free — Webflow acquired GreenSock and released the whole toolset, DrawSVG and MorphSVG included, at no charge in 2025. If you have read an older comparison that says otherwise, including an earlier version of this post, it is out of date.
The cost is bytes and setup. To draw one path on scroll you install three packages, call gsap.registerPlugin(), and ship ~40 KB gzipped — for an effect that is fundamentally one animated stroke-dashoffset.
The one licence difference worth knowing is narrow: svg-scroll-draw is MIT, so you can fork it, bundle it and redistribute it inside your own library. GSAP's licence is free-of-charge but has its own terms around redistribution in a competing product — read them yourself rather than take our word for it.
svg-scroll-draw
MIT · ~10 KB · zero deps
GSAP DrawSVG
Free · ~40 KB · 3 packages
Bundle size
GSAP stack includes gsap core (~27 KB) + ScrollTrigger (~7 KB) + DrawSVG plugin. On Chrome/Edge/Firefox 115+ svg-scroll-draw also offloads the simple draw case to the browser's native CSS compositor — zero per-frame JavaScript.
Code comparison
GSAP DrawSVG
// 3 imports, plugin registration required
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'; // paid
gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin);
gsap.fromTo(
'#logo path',
{ drawSVG: '0%' },
{
drawSVG: '100%',
ease: 'power2.out',
scrollTrigger: {
trigger: '#logo',
start: 'top 80%',
end: 'top 20%',
scrub: true,
},
}
);svg-scroll-draw
// 1 import, zero config
import { scrollDraw } from 'svg-scroll-draw';
scrollDraw('#logo', {
easing: 'ease-out',
trigger: { start: 'top 80%', end: 'top 20%' },
});GSAP DrawSVG
import { useEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';
gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin);
function Logo() {
const ref = useRef<SVGSVGElement>(null);
useEffect(() => {
const ctx = gsap.context(() => {
gsap.fromTo('path', { drawSVG: '0%' }, {
drawSVG: '100%',
ease: 'power2.out',
scrollTrigger: {
trigger: ref.current,
start: 'top 80%',
end: 'top 20%',
scrub: true,
},
});
}, ref);
return () => ctx.revert();
}, []);
return <svg ref={ref}>…</svg>;
}svg-scroll-draw
import { ScrollDraw } from 'svg-scroll-draw/react';
function Logo() {
return (
<ScrollDraw
easing="ease-out"
trigger={{ start: 'top 80%', end: 'top 20%' }}
>
<svg>…</svg>
</ScrollDraw>
);
}GSAP DrawSVG
// Must use gsap.utils.toArray + manual delay
const paths = gsap.utils.toArray('#chart path');
paths.forEach((path, i) => {
gsap.fromTo(path,
{ drawSVG: '0%' },
{
drawSVG: '100%',
delay: i * 0.15,
scrollTrigger: {
trigger: '#chart',
start: 'top 80%',
scrub: true,
},
}
);
});svg-scroll-draw
// stagger is a first-class option
scrollDraw('#chart', {
easing: 'ease-out',
stagger: 0.15,
once: true,
});Feature comparison
| Feature | svg-scroll-draw | GSAP DrawSVG |
|---|---|---|
| License | ✓MIT — fork and redistribute freely | ✗Free to use; own terms restrict redistribution |
| Bundle size (gzipped) | ✓~10 KB | ✗~40 KB (gsap + ScrollTrigger + DrawSVG) |
| Dependencies | ✓Zero | ✗3 packages to install and register |
| Native CSS fast path | ✓Yes — compositor-driven on Chrome/FF 115+ | ✗No — JS only |
| React component | ✓<ScrollDraw> + useScrollDraw hook | ✗useEffect/useRef boilerplate every time |
| Vue 3 | ✓<ScrollDraw> + useScrollDraw composable | ✗Manual setup, no official wrapper |
| Svelte | ✓use:scrollDraw action | ✗Manual setup |
| Solid.js | ✓useScrollDraw + createScrollDraw | ✗Manual setup |
| Angular / Nuxt / Astro | ✓First-class wrappers | ✗Manual setup |
| stagger | ✓Built-in option | ✗gsap.utils.toArray() + per-element delay |
| morphTo | ✓Built-in option | ✗MorphSVGPlugin — free, but another package |
| CSS custom property | ✓--scroll-draw-progress on every frame | ✗Manual onUpdate callback |
| Sequence API | ✓scrollDrawSequence() | ✗Complex ScrollTrigger chaining |
| Group API | ✓scrollDrawGroup() | ✗Manually share trigger across multiple tweens |
| Physics easings | ✓spring, bounce, elastic built-in + factory fns | ✗Bounce, Elastic, CustomEase — all free, separate imports |
| Timeline API | —scrollDrawTimeline() — independent track windows | ✓Yes — GSAP timeline is its strength |
| Complex multi-element timelines | —Scroll-draw scope only | ✓Yes — GSAP excels here |
| Non-SVG animations | —clip reveal only | ✓Yes — text, DOM, anything |
| SSR safe | ✓Yes — observers skip on server | ✗Needs manual typeof window guards |
| TypeScript | ✓Full types included | ✓Full types included |
Honest guidance
svg-scroll-draw is purpose-built for one thing: animating SVG paths as you scroll. If your project goes beyond that, GSAP may be the right tool:
Complex multi-element timelines
Orchestrating dozens of DOM elements across a 10-second scrubbed sequence — GSAP's timeline API has no peer.
Non-SVG animations
Text splitting, FLIP, DOM transforms, canvas — GSAP animates anything. svg-scroll-draw only handles SVG paths.
Physics easings (CustomEase)
svg-scroll-draw ships spring, bounce, and elastic. But GSAP's CustomEase (paid) and the depth of its easing ecosystem still wins for highly tailored curves.
Already in your bundle
If you're already paying the GSAP bundle cost for other animations, DrawSVG adds marginal bytes and your team already knows the API.
Migration guide
For SVG path drawing specifically, the migration is almost mechanical. The concepts map directly.
1. Install
npm i svg-scroll-draw # remove: npm uninstall gsap (if gsap was only used for DrawSVG)
2. Replace the GSAP call
Before (GSAP)
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';
gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin);
gsap.fromTo('#hero path', { drawSVG: '0%' }, {
drawSVG: '100%',
ease: 'power2.out',
scrollTrigger: {
trigger: '#hero',
start: 'top 80%',
end: 'bottom 20%',
scrub: true,
},
});After (svg-scroll-draw)
import { scrollDraw } from 'svg-scroll-draw';
scrollDraw('#hero', {
easing: 'ease-out',
trigger: {
start: 'top 80%',
end: 'bottom 20%',
},
});3. Easing name map
| GSAP ease | svg-scroll-draw easing |
|---|---|
| power2.out / power3.out | "ease-out" |
| power2.in | "ease-in" |
| power2.inOut | "ease-in-out" |
| linear | "linear" |
| elastic.out | "spring" or createSpring({ tension, friction }) |
| none | "linear" |
One install. No membership. Works in every framework.
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.
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.
Line chart that draws on scroll
Animate a line chart as it scrolls into view — axes first, then the data line tracing in with a colour shift. Copy-paste code, zero chart dependencies.
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.
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.
The full GSAP comparison
Beyond DrawSVG — the whole feature matrix, measured.