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.
01
All sizes minified + gzipped. AOS includes CSS (~6KB). svg-scroll-draw includes all v2 APIs.
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 — last updated 2021
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
ScrollReveal.js last release: 2021
✓ supported · ✗ not supported · ~ partial
No data attributes. No config files. No separate CSS import. Works in React, Vue, Svelte, Solid, Astro, Nuxt.