tool / text animationjavascript · react
Text animation generator
Type a line, split it by word, letter or line, choose how each piece arrives, and watch it play. Then copy the code: plain JavaScript or a React component, animated by scroll on your page.
- Splits
- 3
- Motions
- 7
- Easings
- 7
- Gzipped
- 3.4 KB
Make your text animation
0 words
// <h2 id="headline">Every word arrives as you scroll</h2>
import { scrollText } from 'svg-scroll-draw/text';
scrollText('#headline', {
stagger: 0.08,
});On real scroll · the same settings, no seek()
This one is driven by the page: it starts when its top reaches 85% of the window and finishes at 40%.
How scroll drives it
The animation has one number behind it, its progress from 0 to 1. On a page that number comes from the scroll: 0 when the element’s top reaches 85% of the window, 1 when it reaches 40%. Each piece takes its own slice of that range, stagger after the one before (fig. 1), so scrolling faster plays it faster and scrolling back plays it backwards, unless once keeps it in place.
import { scrollText } from 'svg-scroll-draw/text';
// Starts when the heading's top is 85% down the window, done at 40%.
const headline = scrollText('#headline', {
split: 'chars',
stagger: 0.03,
trigger: { start: 'top 85%', end: 'top 40%' },
});
// The same instance can be driven by hand, as the generator does:
headline.seek(0.5); // half way
headline.replay(); // back to the start, following the scroll againWords, letters or lines
Each word moves on its own. The default, and the most readable.
Each letter moves on its own. Best for short headings; long text needs a small stagger.
Each line as it wraps in the layout, measured again when the window resizes.
Every scrollText option
'words' by default. 'words', 'chars' or 'lines'.
0.04 by default. How far into the scroll each piece starts after the one before, as a fraction of the whole (0–1).
'ease-out' by default. 'ease-out', 'ease-in-out', 'ease-in', 'linear', 'spring', 'bounce', 'elastic', or any function of t.
{ opacity: 0, y: 24 } by default. Where each piece starts: opacity, x, y, rotate (degrees), scale. It ends at its natural place.
{ start: 'top 85%', end: 'top 40%' } by default. Element edge and window edge, as in ScrollTrigger: start when its top is at 85% of the window, finish at 40%.
true by default. Keep the text in place after it has arrived, instead of reversing when you scroll back up.
Text animation questions
How do I animate text on scroll?
Split the text into pieces (words, letters or lines), give each piece a starting state such as opacity 0 and 24px down, and move each one to its natural place as the page scrolls, a little after the one before. scrollText('#headline') does all of that: the generator above sets its options and gives you the code.
How do I animate text letter by letter?
Use split: 'chars'. Every letter becomes its own piece and arrives in turn. Keep the stagger small for long text: with n letters the stagger has to stay below 1 / (n - 1) or the letters pop on instead of moving, and the generator warns when it crosses that line.
Can I animate text on scroll with CSS only?
Partly. CSS animation-timeline: view() ties an animation to scroll in browsers that support it, but CSS cannot split a sentence into words or letters, so every piece needs its own element written by hand, and older browsers get no animation. A script does the splitting and works everywhere.
How do I make animated text in React?
Render <ScrollText> from svg-scroll-draw/react with the text as its child and the same options as props, for example <ScrollText as="h2" split="chars">Your heading</ScrollText>. The React tab of the generator writes it for you. It works in the Next.js App Router too.
Do screen readers and search engines still read animated text?
Yes. scrollText keeps one visually hidden copy of the whole text for screen readers and hides the split pieces from them, so the sentence is read once, in full. The text is in the HTML from the start, so search engines see it as normal text.
Is this text animation generator free?
Yes. The generator is free to use and the code it writes uses svg-scroll-draw, which is MIT-licensed. The text entry is 3.4 KB gzipped with nothing else to load.
Accessible splitting in depth: split text a screen reader can read. All of svg-scroll-draw 2.23.3: the docs.