Comparison
GSAP is great, and since 2025 it's free — every plugin, no subscription. So this page isn't about price. It's that for scroll work you ship 47.5 KB and an API surface you'll use 20% of. svg-scroll-draw does the same job at 4.75× smaller, with zero dependencies and a native CSS fast path that runs your draw on the compositor with no per-frame JavaScript at all.
01
All sizes minified + gzipped at level 9, measured 2026-08-14 against gsap 3.15.0, svg-scroll-draw 2.10.0 — measured, not estimated. SplitText is free to use as of 2025; it still costs you the bytes.
02
Worth saying plainly: GSAP is free. Webflow acquired GreenSock and in 2025 released the entire toolset — including SplitText, DrawSVG, MorphSVG and every other former Club GreenSock plugin — at no charge. If you read an older comparison claiming you need a ~$150/yr subscription, that is out of date, and this page used to be one of them. Cost is not a reason to choose svg-scroll-draw. The remaining license difference is narrow but real, and it only matters if you redistribute.
03
GSAP SplitText — free since 2025, but +18 KB on top of core + ScrollTrigger
Default-on for scrollDraw, scrollAnimate, scrollReveal, scrollCounter, scrollText, scrollVideo, scrollSnap and Cinematic — but scrollHorizontal opts out by design and scrollPin/scrollProgress have no path. GSAP ships gsap.matchMedia(), but you write the reduced-motion variant of each animation yourself.
GSAP always runs JS
GSAP has basic React helpers, not full wrappers
GSAP also declares no runtime dependencies — verified from its package.json. The difference is total weight, not dependency count.
GSAP is free to use, but its standard license restricts redistribution inside a competing product or SDK
GSAP ships GSDevTools.js in the public tarball (free since 2025). Ours is scroll-specific and dev-only; theirs is a timeline scrubber.
GSAP works with Lenis but no dedicated adapter
gsap 3.15.0: core 27.7 + ScrollTrigger 17.6 + DrawSVG 2.2 — the equivalent stack, measured 2026-08-14
✓ = supported · ✗ = not supported · ~ = partial or requires extra setup. GSAP figures reflect the free-for-everyone toolset Webflow shipped in 2025 — all former Club GreenSock plugins included.
04
GSAP + ScrollTrigger
gsap.from('#card', {
opacity: 0,
y: 40,
ease: 'power2.out',
scrollTrigger: {
trigger: '#card',
start: 'top 80%',
end: 'top 40%',
scrub: true,
},
});svg-scroll-draw
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,
});GSAP + ScrollTrigger
ScrollTrigger.create({
trigger: '#panel',
start: 'top top',
end: '+=800',
pin: true,
pinSpacing: true,
onEnter: () => console.log('enter'),
onLeave: () => console.log('leave'),
});svg-scroll-draw
import { scrollPin }
from 'svg-scroll-draw/pin';
scrollPin('#panel', {
pinDistance: 800,
onEnter: () => console.log('enter'),
onLeave: () => console.log('leave'),
onEnterBack: () =>
console.log('enter back'),
});GSAP + ScrollTrigger
ScrollTrigger.create({
trigger: '#section',
start: 'top center',
end: 'bottom center',
onEnter: () => activate(),
onLeave: () => deactivate(),
onEnterBack: () => activate(),
onLeaveBack: () => deactivate(),
});svg-scroll-draw
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(),
});GSAP + ScrollTrigger
ScrollTrigger.create({
snap: {
snapTo: 'labels',
duration: { min: 0.2, max: 0.8 },
delay: 0.1,
ease: 'power1.inOut',
},
});svg-scroll-draw
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),
});GSAP SplitText (free, +18 KB)
// core + ScrollTrigger + SplitText
const split = new SplitText('#h1',
{ type: 'words' });
gsap.from(split.words, {
opacity: 0,
y: 20,
stagger: 0.05,
scrollTrigger: '#h1',
});svg-scroll-draw (2.5 KB entry)
import { scrollText }
from 'svg-scroll-draw/text';
scrollText('#h1', {
split: 'words',
stagger: 0.05,
from: { opacity: 0, y: 20 },
once: true,
});05
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.
The full plugin suite — now free
MorphSVG, Flip, MotionPath, Observer and SplitText have no equivalent here, and since 2025 they cost nothing. If you need any of them, use GSAP.
Community & tutorials
GSAP has 15 years of CodePens, tutorials, and community support, plus Webflow behind it now. Our ecosystem is newer.
One npm install. No account. No license key. No config.