v2.8 · scrollReveal · staggerReveal-on-scroll is the most common scroll effect on the web and usually arrives via data attributes sprinkled through the markup, which couples your animation config to your HTML and gives you nothing typed to refactor against. One scrollReveal call on a selector replaces the lot. Worth being straight: AOS (6.7 KB) and ScrollReveal (5.6 KB) are fine at this and are not much bigger than our 3.9 KB reveal entry — the case for switching is types, tree-shaking and not touching your markup.
Six cards fade up and cascade into view as you scroll past — one scrollReveal call, no data attributes. The zero-config replacement for AOS and ScrollReveal.js. Scroll into the preview to see it trigger.
import { scrollReveal } from 'svg-scroll-draw/reveal';
// Fade up (default preset) with stagger
scrollReveal('.card');
// Custom from state
scrollReveal('.feature', {
from: { opacity: 0, y: 40, scale: 0.95 },
stagger: 0.1,
easing: 'ease-out',
once: true,
});
// Named presets: fadeUp | fadeDown | fadeLeft
// fadeRight | scale | flip | flipX
scrollReveal('.badge', { preset: 'scale' });
scrollReveal('.panel', { preset: 'flip' });
scrollReveal('.sidebar',{ preset: 'fadeLeft' });
// Cleanup
const instance = scrollReveal('.card');
instance.destroy();npm i svg-scroll-draw
MIT licensed, zero runtime dependencies. Every API is a separate entry point, so you only ship what you import. Full API reference →
Animate any CSS property on scroll
Drive opacity, transform, colour or any unit value from scroll position. Staggered per-element triggers build a natural reveal. Copy-paste code.
Fan-out animation on scroll
Reveal a whole grid of elements together with scrollAnimateGroup. One call, one timeline, one observer — no per-element boilerplate.