Comparison
ScrollMagic is 5.9 KB against our 10 KB, so on raw numbers it wins — but that figure buys you scroll *detection* only. ScrollMagic has no animation engine: to actually move anything you pair it with GSAP through its animation.gsap plugin, which puts the real total well past ours. That is the comparison worth making, and it is the one this page makes.
Short version: Pick ScrollMagic if you already have GSAP in the bundle and want its scene/controller model. Pick this if you would rather not ship two libraries to animate one element.
01
ScrollMagic is smaller on its own and we are not going to pretend otherwise. The number that matters for a page that actually animates something is ScrollMagic plus an animation engine.
Minified + gzipped at level 9, measured 2026-08-14 against scrollmagic 2.0.9 and svg-scroll-draw 2.10.0. scrollmagic is MIT OR GPL-3.0+.
02
ScrollMagic delegates animation — typically to GSAP via animation.gsap, or to Velocity
Only via GSAP DrawSVG
ScrollMagic predates animation-timeline: view() by about a decade
jQuery plugin only
Community types exist on DefinitelyTyped
Both ship a visual debug overlay — ScrollMagic via its debug.addIndicators plugin
ScrollMagic alone. Add GSAP core + ScrollTrigger to animate anything and it is 45+ KB on top.
✓ supported · ✗ not supported · ~ partial or requires extra work. Checked against scrollmagic 2.0.9.
03
The scene/controller model
ScrollMagic’s Scene and Controller abstraction is genuinely expressive for complex multi-trigger pages, and some teams prefer thinking in scenes.
You already ship GSAP
If GSAP is in the bundle regardless, ScrollMagic adds only 5.9 KB on top and reuses an animation engine you have already paid for.
A decade of answers
ScrollMagic has been around since 2014. Almost any question has a Stack Overflow answer already.
04
The npm package was last published 2026-06-25. It is a stable, finished library rather than an abandoned one — but it predates modern scroll APIs, so it uses scroll listeners rather than IntersectionObserver and has no path to the native CSS scroll timeline.
For animation, effectively yes. ScrollMagic detects scroll and manages scenes; it does not interpolate values. The standard setup adds GSAP through the animation.gsap plugin, so the practical bundle is ScrollMagic plus GSAP core plus ScrollTrigger.
svg-scroll-draw covers detection and animation in one 10 KB package with zero dependencies, eight framework wrappers, shipped TypeScript types, and a native CSS fast path. GSAP ScrollTrigger is the other obvious answer and is broader still.