v2 · scrollAnimate · staggeredscrollDraw handles SVG paths; scrollAnimate handles everything else — any CSS property, interpolated from scroll position, including multi-function transform strings and hex or rgb colours. This example gives each part of a pricing card its own trigger offset, which is what stops a staggered reveal reading like a single block sliding in.
A pricing card where every element — badge, plan name, price, feature list, CTA — reveals on scroll with staggered scrollAnimate calls. Each element has its own trigger offset for a natural cascade.
import { scrollAnimate } from 'svg-scroll-draw';
// Each element gets its own trigger offset → natural cascade
scrollAnimate(badgeEl, {
props: { opacity: [0, 1], transform: ['translateY(16px)', 'translateY(0)'] },
trigger: { start: 'top 85%', end: 'top 45%' },
easing: 'ease-out', once: true,
});
scrollAnimate(priceEl, {
props: { opacity: [0, 1], transform: ['translateY(24px)', 'translateY(0)'] },
trigger: { start: 'top 80%', end: 'top 40%' }, // starts 5% later
easing: 'ease-out', once: true,
});
scrollAnimate(ctaEl, {
props: { opacity: [0, 1], transform: ['translateY(12px)', 'translateY(0)'] },
trigger: { start: 'top 74%', end: 'top 34%' }, // last to reveal
easing: 'ease-out', once: true,
});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 →
Card cascade reveal on scroll
Fade and cascade elements into view with one scrollReveal call. A 3.9 KB, typed replacement for AOS and ScrollReveal.js — no data attributes.
Fan-out animation on scroll
Reveal a whole grid of elements together with scrollAnimateGroup. One call, one timeline, one observer — no per-element boilerplate.