svg-scroll-draw/blog/comparison

GSAP DrawSVG Alternative · May 2026 · 6 min read

svg-scroll-draw
vs GSAP DrawSVG

GSAP DrawSVG is powerful — but it requires a paid Club GreenSock membership for commercial projects, adds ~40 KB to your bundle, and demands boilerplate for every framework. Here's a complete comparison, side-by-side code, and a migration guide.

svg-scroll-draw

~4.4 KB

gzipped

GSAP stack

~40 KB

gzipped

svg-scroll-draw

MIT

license

GSAP DrawSVG

Paid

commercial

At a glance

The short version

svg-scroll-draw

  • ✓~4.4 KB gzipped — 9× smaller
  • ✓MIT — free for commercial use, forever
  • ✓Zero dependencies
  • ✓Native CSS fast path (Chrome/FF 115+)
  • ✓First-class React, Vue, Svelte, Solid, Angular, Nuxt, Astro wrappers
  • ✓stagger, morphTo, Sequence, Group, Timeline — all built in
  • ✓SSR-safe out of the box

GSAP DrawSVG

  • ✗~40 KB (gsap + ScrollTrigger + DrawSVG)
  • ✗DrawSVG requires Club GreenSock — $150+/yr for commercial use
  • ✗3 packages, plugin registration boilerplate
  • ✗JS only — no native CSS path
  • ✗No framework wrappers — useEffect + useRef every time in React
  • ✗morphTo requires MorphSVGPlugin — another paid plugin
  • ✓Unmatched for complex multi-element timelines (non-SVG)

Licensing

The real cost of GSAP DrawSVG

GSAP's core library is free — but DrawSVG is a Club GreenSock member plugin. Commercial use requires an active membership (currently ~$150+/year per developer). That applies to client work, SaaS products, and anything that generates revenue.

This also means DrawSVG can't be distributed as a dependencyin an open-source npm package. If you're building a component library or design system, you're blocked.

svg-scroll-draw is MIT. Use it commercially, fork it, bundle it, redistribute it — no fees, no membership, no restrictions. Ever.

svg-scroll-draw

MIT License · No restrictions

GSAP DrawSVG

Club GreenSock · ~$150+/yr commercial

Bundle size

9× smaller than GSAP

svg-scroll-draw~4.4 KB
GSAP + ScrollTrigger + DrawSVG~40 KB
Framer Motion~35 KB

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

Same animation, both libraries

Vanilla JS

GSAP DrawSVG

hero.js
// 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

hero.js
// 1 import, zero config
import { scrollDraw } from 'svg-scroll-draw';

scrollDraw('#logo', {
  easing: 'ease-out',
  trigger: { start: 'top 80%', end: 'top 20%' },
});

React

GSAP DrawSVG

Logo.tsx
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

Logo.tsx
import { ScrollDraw } from 'svg-scroll-draw/react';

function Logo() {
  return (
    <ScrollDraw
      easing="ease-out"
      trigger={{ start: 'top 80%', end: 'top 20%' }}
    >
      <svg>…</svg>
    </ScrollDraw>
  );
}

With stagger

GSAP DrawSVG

chart.js
// 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

chart.js
// stagger is a first-class option
scrollDraw('#chart', {
  easing: 'ease-out',
  stagger: 0.15,
  once: true,
});

Feature comparison

Full feature matrix

Featuresvg-scroll-drawGSAP DrawSVG
License
✓MIT — free forever
✗Club GreenSock (commercial use requires membership)
Bundle size (gzipped)
✓~4.4 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 — another paid Club plugin
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 is a paid plugin)
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

When GSAP still makes sense

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

Switch in under 5 minutes

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 easesvg-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"

Ready to make the switch?

One install. No membership. Works in every framework.

$npm i svg-scroll-draw
⚡ Try the Playground →See 13 Examples →