Comparison

svg-scroll-draw
vs GSAP.

GSAP is great. But for scroll animations it costs you ~50 KB, a commercial license for some features, and an API surface you'll only use 20% of. svg-scroll-draw does the same job at 5.5× smaller and free forever.

Get started free →Migration guide →

01

Bundle size.

svg-scroll-draw
~9 KB
yours
GSAP core
~28 KB
GSAP + ScrollTrigger
~50 KB
common setup
GSAP + ScrollTrigger + SplitText
~68 KB
full suite

All sizes minified + gzipped. Source: bundlephobia.com. GSAP SplitText requires a paid Club GreenSock license for commercial use.

02

License.

svg-scroll-drawMIT
  • ✓Free for personal use
  • ✓Free for commercial use
  • ✓Free forever — no subscription
  • ✓All features included
  • ✓No attribution required
  • ✓Fork, modify, redistribute freely
GSAPGreenSock Standard
  • ✓Free for personal use
  • ✓Free for most commercial use
  • ✗SplitText: requires Club GreenSock (~$150/yr)
  • ✗No OEM / saas reselling without license
  • ✗Cannot be used in competing animation tools
  • ✗License terms may change

03

Feature matrix.

Feature
svg-scroll-draw
GSAP
Animate any CSS property on scroll
✓
✓
SVG path draw (stroke-dashoffset)
✓
✓
Animated number counters
✓
✓
Text split + stagger

GSAP SplitText requires Club GreenSock

✓
paid
Video scrub on scroll
✓
✓
Pin / sticky sections
✓
✓
Section snapping
✓
✓
onEnter / onLeave / onEnterBack / onLeaveBack
✓
✓
Native CSS scroll-driven animation

GSAP always runs JS

✓
✗
Parallax
✓
✓
Path morphing on scroll
✓
✓
Waypoints (fire at progress %)
✓
✓
Spring / bounce / elastic easings
✓
✓
React / Vue / Svelte / Solid wrappers

GSAP has basic React helpers, not full wrappers

✓
~
Angular / Astro / Nuxt wrappers
✓
✗
Zero runtime dependencies

GSAP has no deps but is itself a large dep

✓
✗
MIT license (free for commercial use)

GSAP requires paid license for SplitText

✓
✗
Visual DevTools overlay

GSAP has no built-in overlay; third-party only

✓
✗
Lenis smooth-scroll adapter

GSAP works with Lenis but no dedicated adapter

✓
~
Bundle size (minified + gzipped)
~9 KB
~50 KB

✓ = supported · ✗ = not supported · ~ = partial · paid = requires Club GreenSock subscription

04

Side-by-side API.

Fade + slide in on scroll

GSAP + ScrollTrigger

gsap.js
gsap.from('#card', {
  opacity:  0,
  y:        40,
  ease:     'power2.out',
  scrollTrigger: {
    trigger: '#card',
    start:   'top 80%',
    end:     'top 40%',
    scrub:   true,
  },
});

svg-scroll-draw

app.js
import { scrollAnimate }
  from 'svg-scroll-draw';

scrollAnimate('#card', {
  props: {
    opacity:   [0, 1],
    transform: [
      'translateY(40px)',
      'translateY(0)',
    ],
  },
  easing:  'ease-out',
  trigger: {
    start: 'top 80%',
    end:   'top 40%',
  },
  once: true,
});

Pin / sticky section

GSAP + ScrollTrigger

gsap.js
ScrollTrigger.create({
  trigger:     '#panel',
  start:       'top top',
  end:         '+=800',
  pin:         true,
  pinSpacing:  true,
  onEnter:     () => console.log('enter'),
  onLeave:     () => console.log('leave'),
});

svg-scroll-draw

app.js
import { scrollPin }
  from 'svg-scroll-draw/pin';

scrollPin('#panel', {
  pinDistance: 800,
  onEnter:  () => console.log('enter'),
  onLeave:  () => console.log('leave'),
  onEnterBack: () =>
    console.log('enter back'),
});

onEnter / onLeave callbacks

GSAP + ScrollTrigger

gsap.js
ScrollTrigger.create({
  trigger: '#section',
  start:   'top center',
  end:     'bottom center',
  onEnter:     () => activate(),
  onLeave:     () => deactivate(),
  onEnterBack: () => activate(),
  onLeaveBack: () => deactivate(),
});

svg-scroll-draw

app.js
import { scrollAnimate }
  from 'svg-scroll-draw';

scrollAnimate('#section', {
  props: { opacity: [0.5, 1] },
  trigger: {
    start: 'top center',
    end:   'bottom center',
  },
  onEnter:     () => activate(),
  onLeave:     () => deactivate(),
  onEnterBack: () => activate(),
  onLeaveBack: () => deactivate(),
});

Section snapping

GSAP + ScrollTrigger

gsap.js
ScrollTrigger.create({
  snap: {
    snapTo:   'labels',
    duration: { min: 0.2, max: 0.8 },
    delay:    0.1,
    ease:     'power1.inOut',
  },
});

svg-scroll-draw

app.js
import { scrollSnap }
  from 'svg-scroll-draw/snap';

scrollSnap('.section', {
  duration:  600,
  easing:    'ease-in-out',
  threshold: 0.3,
  onSnap: (index) =>
    console.log('snapped to', index),
});

Text split + stagger GSAP = paid

GSAP SplitText (Club GreenSock)

gsap.js
// Requires paid Club GreenSock
const split = new SplitText('#h1',
  { type: 'words' });

gsap.from(split.words, {
  opacity: 0,
  y: 20,
  stagger: 0.05,
  scrollTrigger: '#h1',
});

svg-scroll-draw (free)

app.js
import { scrollText }
  from 'svg-scroll-draw/text';

scrollText('#h1', {
  split:   'words',
  stagger: 0.05,
  from: { opacity: 0, y: 20 },
  once: true,
});

05

When GSAP is still the right call.

We're being honest here. GSAP has 15 years of production hardening and some features we don't have yet:

Complex timeline sequencing

GSAP's timeline API is unmatched for orchestrating multi-element animations across a precise time axis.

Draggable + physics

GSAP Draggable, Inertia, and physics plugins have no equivalent in scroll-focused libraries.

Club GreenSock plugins

MorphSVG (advanced), DrawSVG (GSAP's version), Flip, and MotionPath are uniquely GSAP.

Community & tutorials

GSAP has 15 years of CodePens, tutorials, and community support. Our ecosystem is newer.

Try it in 30 seconds.

One npm install. No account. No license key. No config.

$npm i svg-scroll-draw
Read the docs →Migration guide →