Comparison

svg-scroll-draw
vs Locomotive Scroll.

These two are close in size — 9.3 KB against our 10 KB — and easy to mistake for alternatives, but they do different jobs. Locomotive Scroll v5 is a smooth-scroll and scroll-detection layer built on Lenis: it eases the scroll itself and applies classes or progress values as elements pass through the viewport. It does not interpolate SVG paths, split text or scrub video. If you want the momentum feel, you want Locomotive or Lenis. If you want things to animate, you want this.

Short version: Pick Locomotive for smooth scrolling with simple in-view triggers. Pick this for the animation itself — and note you can run both, since v5 is Lenis-based.

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

01

Size.

These are close enough in size that the number is not the argument. What differs is what you get for it: smooth scrolling and triggers, versus an animation engine.

locomotive-scroll 5.0.1
9.3 KB
smaller
svg-scroll-draw 2.10.0
10 KB
yours

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

02

Feature matrix.

Feature
svg-scroll-draw
Locomotive Scroll
Smooth / eased scrolling

Not something we do or plan to — it is Lenis’s job, and we ship an adapter for it

In-view detection
Scroll progress value

Ours is exposed as a CSS custom property so you can drive CSS without a callback

SVG path draw
Animate arbitrary CSS properties

Locomotive applies classes and progress; the animating is left to your CSS

~
Text split + stagger
Number counters
Video scrub
Pin / sticky sections

data-scroll-sticky covers the basic case

~
Parallax
Horizontal scroll sections
Config in HTML attributes

A genuine preference difference, not a defect either way

Framework wrappers
8
Bundle size (gzipped)

Locomotive’s bundled build, which includes Lenis

10 KB
9.3 KB

✓ supported · ✗ not supported · ~ partial or requires extra work. Checked against locomotive-scroll 5.0.1.

03

When Locomotive Scroll is the right call.

Smooth scrolling

The momentum feel is the entire point of Locomotive and we do not compete with it. If that is what you are after, use Locomotive or Lenis directly.

Attribute-driven setup

data-scroll attributes mean no JavaScript per element. If your team prefers configuration in markup, that is a real advantage.

It is Lenis underneath

v5 rebuilt on Lenis, so you get a well-maintained smooth-scroll core rather than a bespoke scroll hijack.

04

Questions.

Is Locomotive Scroll an alternative to svg-scroll-draw?

Not really — they solve different problems. Locomotive smooths the scroll and reports when elements enter view; svg-scroll-draw animates SVG paths, text, counters and video against scroll position. Many sites want both.

Can I use Locomotive Scroll with svg-scroll-draw?

Yes. Locomotive v5 is built on Lenis, and Lenis v2 and later patch window.scrollY natively, so our engines read the correct value with no adapter. For Lenis v1 there is an adapter at svg-scroll-draw/lenis.

Which is smaller?

Locomotive Scroll is 9.3 KB and svg-scroll-draw is 10 KB for every API at once, measured at gzip level 9. They are close enough that size should not decide it — scope should.