Patterns · June 2026 · 5 min read
The five scroll animation patterns that cover 95% of real-world SVG use cases — each in 3 lines using svg-scroll-draw presets. No config, no GSAP, no boilerplate.
Use case: Hero sections, brand marks, above-the-fold SVG illustrations
The most common scroll animation. A logo or illustration draws in once as it enters the viewport, fades as it draws, and stays drawn. The reveal preset sets fade, ease-out, and once — the three options you'd set manually every time.
Vanilla JS
import { scrollDraw } from 'svg-scroll-draw';
scrollDraw('#logo', { preset: 'reveal' });React
import { ScrollDraw } from 'svg-scroll-draw/react';
function Logo() {
return (
<ScrollDraw preset="reveal">
<svg>…</svg>
</ScrollDraw>
);
}Use case: Technical diagrams, infographics, process flows, architectural illustrations
Multi-path SVGs — diagrams, flowcharts, architecture drawings — look best when paths trace in one by one rather than all at once. The sketch preset adds a 0.1 stagger and uses ease-in so each line feels like a pen stroke.
Vanilla JS
scrollDraw('#architecture-diagram', { preset: 'sketch' });
// Or slow it down slightly for dense diagrams
scrollDraw('#circuit', { preset: 'sketch', speed: 0.7 });React
<ScrollDraw preset="sketch">
<svg>{/* your diagram SVG */}</svg>
</ScrollDraw>
{/* Override stagger for fewer paths */}
<ScrollDraw preset="sketch" stagger={0.2}>
<svg>{/* 3-step flow */}</svg>
</ScrollDraw>Use case: Code snippets drawn as SVG, timeline steps, sequential data labels
When you want paths to appear quickly in strict sequence — like text being typed or steps in a timeline — the typewriter preset uses linear easing (mechanical, no easing in/out) with a tight 0.05 stagger and fast speed.
Vanilla JS
scrollDraw('#timeline-steps', { preset: 'typewriter' });
// Tighten the trigger window for a snappier effect
scrollDraw('#code-svg', {
preset: 'typewriter',
trigger: { start: 'top 70%', end: 'top 30%' },
});React
<ScrollDraw preset="typewriter">
<svg>{/* sequential path SVG */}</svg>
</ScrollDraw>Use case: Landing page heroes, scroll storytelling, large showcase illustrations
Slow, deliberate, and dramatic. The cinematic preset draws over a longer scroll range (speed: 0.75) with ease-in-out so it accelerates into and decelerates out of the draw, plus a fade for a film-like reveal. Perfect for full-width hero SVGs.
Vanilla JS
scrollDraw('#hero-illustration', { preset: 'cinematic' });
// Add strokeColor for extra drama
scrollDraw('#hero', {
preset: 'cinematic',
strokeColor: ['#333', '#ff90e8'],
});React
<ScrollDraw
preset="cinematic"
strokeColor={['#333', '#ff90e8']}
>
<svg>{/* hero illustration */}</svg>
</ScrollDraw>Use case: Icons, small decorative elements, UI feedback SVGs, loading indicators
Spring easing overshoots past 1.0 and settles back — giving small SVGs a bouncy, alive feeling that linear and ease-out never capture. Great for icons and micro-animations where you want personality, not polish.
Vanilla JS
scrollDraw('#check-icon', { preset: 'spring' });
scrollDraw('#star-rating', { preset: 'spring', stagger: 0.08 });React
{/* React icon with spring + stagger */}
<ScrollDraw preset="spring" stagger={0.08}>
<svg>{/* star or check icon */}</svg>
</ScrollDraw>Bonus
Presets are just defaults. Pass any option alongside preset to override:
// reveal but with spring easing instead of ease-out
scrollDraw('#logo', { preset: 'reveal', easing: 'spring' });
// sketch but slower and with color animation
scrollDraw('#diagram', {
preset: 'sketch',
speed: 0.6,
strokeColor: ['#aaa', '#ff90e8'],
});
// Inspect what a preset sets
import { PRESETS } from 'svg-scroll-draw';
console.log(PRESETS.cinematic);
// { easing: 'ease-in-out', fade: true, speed: 0.75 }Try the presets live
Open the Playground, select a preset from the Motion tab, and see the effect instantly.