v2 · scrollText · words + charsWord-by-word headline reveals are the signature effect of an agency landing page, and the accessibility trap is that splitting text into spans normally destroys it for screen readers. This keeps an aria-label on the container and marks the fragments aria-hidden, so the headline is still read as one sentence — and destroy() puts the original HTML back.
A two-line marketing headline that reveals word-by-word on scroll, followed by a subtitle trickling in char by char. Each line has its own trigger window so they cascade naturally.
import { scrollText } from 'svg-scroll-draw/text';
// Line 1 — words fade up with stagger
scrollText('#line1', {
split: 'words',
stagger: 0.07,
from: { opacity: 0, y: 32 },
easing: 'ease-out',
once: true,
trigger: { start: 'top 88%', end: 'top 52%' },
});
// Line 2 — offset trigger, starts after line 1
scrollText('#line2', {
split: 'words',
stagger: 0.07,
from: { opacity: 0, y: 32 },
once: true,
trigger: { start: 'top 84%', end: 'top 48%' },
});
// Subtitle — char-by-char typewriter trickle
scrollText('#subtitle', {
split: 'chars',
stagger: 0.015,
from: { opacity: 0 },
easing: 'linear',
once: true,
});Zero deps · MIT · 9 KB · works with React, Vue, Svelte
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 →
Feature list cascade on scroll
Slide feature rows in from the left with a staggered cascade as the section scrolls into view. The standard marketing feature-list reveal.
Signature handwriting animation
Make a signature write itself as the page scrolls — the classic handwriting effect in a few lines of SVG and one function call. No GSAP, no canvas.