Comparison

svg-scroll-draw
vs Motion.

Motion is the successor to Framer Motion and a genuinely excellent general animation engine — springs, gestures, layout animations, timelines. This is not that. This library does one axis, scroll, and does the scroll-specific things Motion leaves to you: SVG path drawing, pinning, snapping, text splitting and video scrubbing. The size gap follows from the scope gap: 10 KB against 45.2 KB for Motion’s single bundle.

Short version: Pick Motion if you animate more than scroll — gestures, layout, springs, enter/exit. Pick this if scroll is the whole job and you would rather ship a tenth of the bytes.

$npm i svg-scroll-draw
23 live examples →

01

Size.

Motion’s figure is its single bundle, which is the fairest like-for-like against our main entry — but tree-shaking helps Motion more than it helps us, because we already split every API into its own entry point.

svg-scroll-draw 2.10.0
10 KB
yours
motion 13.1.0
45.2 KB

Minified + gzipped at level 9, measured 2026-08-14 against motion 13.1.0 and svg-scroll-draw 2.10.0. motion is MIT.

02

Feature matrix.

Feature
svg-scroll-draw
Motion
Scroll-driven animation
SVG path draw

Motion animates any attribute, so pathLength works — but there is no draw-specific API, stagger orchestration or preset

~
Pin / sticky sections
Section snapping
Text split + stagger

No splitText in the published bundle; you split the DOM yourself

Number counters

animate() on a value plus an onUpdate handler; no format helper

~
Video scrub
Horizontal scroll sections
Spring physics

We ship createSpring for easing; Motion has a real physics model with velocity transfer

~
Gestures (drag, hover, tap)

Motion’s gesture system has no equivalent here and is not something we intend to build

Layout / shared-element animation
Enter/exit animation
Native CSS fast path

Motion uses WAAPI where it can, which is close in spirit; ours compiles eligible draws to a CSS view-timeline with no per-frame JS at all

~
Bundle size (gzipped)

Motion’s single dist bundle. A tree-shaken import of only its scroll helpers is considerably smaller.

10 KB
45.2 KB

✓ supported · ✗ not supported · ~ partial or requires extra work. Checked against motion 13.1.0.

03

When Motion is the right call.

Everything that is not scroll

Gestures, drag, layout animations, enter/exit, orchestrated variants. Motion is a complete animation system; this is a scroll library.

Real spring physics

Motion models velocity and mass properly, including handing velocity from a gesture into a spring. Our createSpring is a spring-shaped easing curve, not a physics engine.

Tree-shaking makes the size gap smaller

The 45.2 KB figure is the full bundle. Import only what you use and Motion is far lighter than that number suggests.

04

Questions.

What is the difference between Motion and svg-scroll-draw?

Motion is a general animation engine covering gestures, layout, springs and enter/exit as well as scroll. svg-scroll-draw only does scroll, but covers scroll-specific work Motion does not — SVG path drawing with stagger, pinning, snapping, text splitting and video scrubbing — at 10 KB against 45.2 KB.

Is Motion the same as Framer Motion?

Motion is the successor package and shares the same version line; framer-motion remains the React-specific entry point. Both are MIT licensed and actively published.

Can I use both together?

Yes. They touch different properties and neither patches global scroll state, so using Motion for gestures and layout alongside this for scroll-driven work is a reasonable setup.