Integration
Lenis is the smooth-scroll library everyone reaches for, and it comes up constantly as an “alternative” to scroll animation libraries. It is not one. Lenis eases the scroll itself; this library animates things against scroll position. They are complementary, we ship an adapter for it, and that is why there is no /vs-lenis page here.
Short version: on Lenis v2+ it just works, no adapter. On Lenis v1 you need three extra lines.
01
Nothing special required. Lenis v2 patches window.scrollY itself, so every engine here reads the correct position with no adapter and no configuration.
import Lenis from 'lenis';
import { scrollDraw } from 'svg-scroll-draw';
const lenis = new Lenis();
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
// No adapter — window.scrollY is already correct.
scrollDraw('#hero-svg', { easing: 'ease-out', speed: 1.2 });02
v1 keeps scroll position in a virtual value and never updates window.scrollY, so anything reading native scroll sees a stale number and your animations appear frozen. The adapter patches it and restores it on destroy.
import Lenis from '@studio-freight/lenis';
import { createLenisAdapter } from 'svg-scroll-draw/lenis';
import { scrollDraw } from 'svg-scroll-draw';
const lenis = new Lenis();
const adapter = createLenisAdapter(lenis);
function raf(time) {
lenis.raf(time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
scrollDraw('#hero-svg', { easing: 'ease-out', speed: 1.2 });
// On teardown — restores native window.scrollY:
// adapter.destroy();03
Worth knowing before you commit: the native CSS fast path does not survive a virtual scroll value. A CSS view-timeline reads real scroll position, so when Lenis v1 is driving, affected animations fall back to the JavaScript engine. That is still the path most browsers take today, and the fallback is automatic — but you do lose the zero-per-frame-JS optimisation on those elements.
Lenis 1.3.26 is 5.3 KB gzipped, MIT, last published 2026-08-05. svg-scroll-draw 2.10.0 is 10 KB. Measured 2026-08-14 at gzip level 9.
04
Yes. On Lenis v2 and later no adapter is needed at all — Lenis patches window.scrollY natively, so the animation engines read the correct value. On Lenis v1, which keeps scroll in a virtual value, import createLenisAdapter from svg-scroll-draw/lenis and pass it your Lenis instance.
No — they do different jobs and are designed to be used together. Lenis eases the scroll itself; svg-scroll-draw animates elements against scroll position. Neither replaces the other, which is why there is no versus page for Lenis on this site.
Lenis v1 hijacks scrolling and stores the position in its own virtual value without updating window.scrollY, so anything reading native scroll position sees a stale number. The adapter patches window.scrollY and window.pageYOffset to report Lenis’s value, then restores them on destroy.
It changes how it runs. With Lenis driving the frame loop, animation updates happen inside Lenis’s rAF tick. The native CSS fast path is bypassed for elements affected by a virtual scroll value, since a CSS view-timeline reads real scroll position — so expect the JS engine to handle those.