Comparison
AOS and ScrollReveal.js put animation config in HTML data attributes. svg-scroll-draw puts it in JavaScript — typed, traceable, and part of a full scroll platform. Both of them are smaller than us, and both do less; the numbers below are measured so you can decide which trade you want.
01
This one does not go our way, so here it is plainly: AOS and ScrollReveal are both smallerthan svg-scroll-draw's main entry. They also do considerably less — neither draws SVG paths, pins, snaps, splits text or scrubs video. If all you need is fade-up-on-scroll, they are a perfectly good choice and you should use them. Our svg-scroll-draw/reveal entry point is 3.9 KB if you want just that piece — that is the number worth comparing, not the 10.0 KB figure for every API at once.
All sizes minified + gzipped at level 9, measured 2026-08-14 against aos 2.3.4, scrollreveal 4.0.9, svg-scroll-draw 2.10.0 — measured, not estimated. AOS includes its stylesheet (2.1 KB), which you need.
02
AOS
<!-- HTML attribute on every element -->
<div data-aos="fade-up"
data-aos-once="true">
Content
</div>
<!-- Init in JS -->
AOS.init({ duration: 800 });ScrollReveal.js
// ScrollReveal.js 4.0.9 (GPL-3.0)
const sr = ScrollReveal({
origin: 'bottom',
distance: '32px',
duration: 800,
once: true,
});
sr.reveal('.card');svg-scroll-draw
import { scrollReveal }
from 'svg-scroll-draw/reveal';
// One import. One call.
scrollReveal('.card');
// Custom config:
scrollReveal('.card', {
from: { opacity: 0, y: 32 },
stagger: 0.08,
once: true,
});AOS
<!-- AOS: delay per element in HTML -->
<div data-aos="fade-up"
data-aos-delay="0">A</div>
<div data-aos="fade-up"
data-aos-delay="100">B</div>
<div data-aos="fade-up"
data-aos-delay="200">C</div>ScrollReveal.js
sr.reveal('.card', {
interval: 100,
origin: 'bottom',
});svg-scroll-draw
scrollReveal('.card', {
stagger: 0.1, // seconds
});03
AOS ships 8 named CSS easings; ScrollReveal takes any CSS timing function. Only we take a JS easing function (createSpring/createBounce/createElastic).
Neither ships its own .d.ts; both have community types on DefinitelyTyped (@types/aos, @types/scrollreveal).
True for scrollReveal. Not a blanket claim across every API here — scrollHorizontal opts out by design. Neither AOS nor ScrollReveal references prefers-reduced-motion in its published bundle.
Dates from npm, read 2026-08-14. Both are stable, finished libraries rather than abandoned ones — weigh that how you like.
ScrollReveal is GPL-3.0, which is a real consideration for a closed-source commercial product. AOS is MIT, same as us.
Measured 2026-08-14 at gzip level 9 against aos 2.3.4 and scrollreveal 4.0.9. Both are smaller than us — see below.
✓ supported · ✗ not supported · ~ partial
No data attributes. No config files. No separate CSS import. Works in React, Vue, Svelte, Solid, Astro, Nuxt.