preset option · one-liner setupMost scroll animations want the same handful of option combinations, and getting there means learning the whole option surface first. A preset is shorthand for two to four of those options, so { preset: "sketch" } is a complete setup. They are not a lock-in: anything you pass alongside a preset overrides it, so a preset is a starting point rather than a mode.
Five named presets — sketch, reveal, typewriter, cinematic, spring — apply sensible defaults in a single option. Each preset is a shorthand for 2–4 common options; user options always override.
import { scrollDraw } from 'svg-scroll-draw';
// One-liner for each common pattern
scrollDraw('#logo', { preset: 'reveal' }); // fade + ease-out, once
scrollDraw('#diagram', { preset: 'sketch' }); // staggered ease-in
scrollDraw('#text', { preset: 'typewriter' }); // fast linear stagger
scrollDraw('#hero', { preset: 'cinematic' }); // slow fade ease-in-out
scrollDraw('#icon', { preset: 'spring' }); // spring easing
// Override any preset value
scrollDraw('#logo', { preset: 'reveal', easing: 'spring' });
// Inspect presets
import { PRESETS } from 'svg-scroll-draw';
console.log(PRESETS.reveal);
// { easing: 'ease-out', fade: true, speed: 1.2, 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.
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.