What is JavaScript text animation and when does CSS fall short?
CSS keyframes cover a single element that fades, slides or pulses, a fixed list of words rotating on a loop, or any effect that starts on load and never reacts to anything. No script needed for those.
Per-letter sequencing is where it stops being practical. Every unit needs its own delay, and somebody has to write all those values.
JavaScript takes over when the text itself has to change and not only its style. Typing and scrambling both work that way. So does any effect where each character gets a computed delay, where the start depends on scroll position, hover or a runtime value, or where a number counts up to a figure read from data.
Mixed setups are common and often the best option. Script splits the text and writes an index onto each span, then a CSS rule reads that index to set the delay and does the actual animating.
Which text animation effects can you build?
Typewriter, fade-in, staggered reveal, scramble, rotating words and number counters cover most real projects. Each suits a different kind of text, and most of them fall apart on anything longer than a line or two.
Typing and rotating effects
Algolia’s InstantSearch documentation recommends a random pause of 50 to 90 milliseconds between typed characters, because that range looks the most natural.
The same guide uses typing in animated search placeholders, where the motion draws attention to the search box and suggests possible queries.
A typewriter effect shows characters one at a time, usually with a blinking cursor and sometimes a delete phase. Rotating words are simpler. One word in a headline swaps for the next on a timer.
Reserve a fixed width for the rotating slot, or the rest of the line jumps on every swap. Both effects belong on one short line.
Reveal and stagger effects
The same set of character spans can take a fade, a slide, a blur or a rotation. The stagger decides how it reads.
Stagger means each unit starts a fixed delay after the previous one. The order is a design choice, so it can run forward, backward, from the center outward, or at random.
Opacity from 0 to 1 plus a short translateY does most of the work, and a scale-up from slightly smaller works too. Stick to transform and opacity for reveals. Simple versions also exist in pure CSS, like this collection of CSS text animations, which is the better pick when the text never changes.
Scramble and counter effects
Scramble effects flicker random characters, then settle on the final text. The shuffle-text library produces exactly this, and ICS.media’s roundup of text libraries points to hero sections and menus as its best fit.
Counters roll a number from its old value to a new one. NumberFlow, from the same roundup, handles smooth transitions between numeric values.
That roundup also carries a warning worth keeping. Animation should never make text harder to read or briefly cover important content.
How do you split text into characters, words and lines?
Wrap each character, word or line in its own span, set display to inline-block so transforms apply, then animate the spans instead of the text. A splitting tool does the wrapping and can restore the original markup afterward.
Wrapping characters and words in spans
A browser treats raw text as a text node, which cannot be styled or animated on its own. Each unit has to sit inside an element first.
Letter spans need display: inline-block, because transforms do not apply to plain inline boxes. A wrapper around each word with white-space: nowrap stops a line from breaking in the middle of a word. Spaces stay outside the letter spans, so the paragraph still wraps normally.
Splitting.js and GSAP’s SplitText do this wrapping for you, and Anime.js v4 ships a splitText utility that returns characters, words and lines.
GSAP’s 3.13 rewrite of SplitText improved emoji and foreign character support and added a standalone mode that loads without GSAP’s core (GSAP, 2025).
Grapheme-safe splitting with Intl.Segmenter
Intl.Segmenter became Baseline newly available in April 2024, according to MDN.
Chrome 87 and Edge 87 shipped it in 2020 and Safari 14.1 in 2021, per web.dev. Baseline waited for Firefox 125 in April 2024.
It reached Baseline Widely available on October 16, 2026, per the web-features data.
The reason to care is simple. Splitting a string with split(“”) or the spread operator cuts it by code unit or code point, so an emoji sequence joined by zero-width joiners, or a letter with a combining accent, falls into pieces and each piece gets its own span. The animation then tears the symbol apart.
Grapheme granularity returns what a reader sees as one character. Word granularity is required for Chinese and Japanese, which do not separate words with spaces.
Splitting lines on resize
Line splitting measures where words wrap, so the result is only valid at the current width. A rotated phone or a late-loading font changes the breaks.
Run the split after document.fonts.ready resolves, or the measurement uses fallback metrics. To handle resizing, watch the container with a ResizeObserver, debounce the callback, restore the original markup, then split again. SplitText offers a revert() method for the restore step.
Skip this and lines end up broken in the wrong places after the first orientation change.
Which implementation approach fits the effect?
Match the approach to what changes. Styles on split text suit CSS plus a few lines of JavaScript, and sequenced reveals without a dependency suit the Web Animations API.
Text that itself changes (typing, scramble, counters) needs a script loop. Long timelines or scroll sync justify a library.
CSS plus JavaScript is the lightest route. Transform and opacity animate smoothly, the delay comes from a custom property set on each span, and the code stays tiny. The catch is that the text cannot change, and chaining steps means listening for animationend events.
The Web Animations API is native and needs no dependency. Element.animate() has worked across browsers since March 2020 and is Baseline Widely available (MDN), and each call returns an Animation object with playback controls and a finished promise. Its keyframes take CSS properties only, according to MDN, so typing and counters are out.
A timer or requestAnimationFrame loop gives you full control and is the only route for typing, scramble and counters. Easing, pausing and cleanup are yours to write, though.
Libraries bring timelines, stagger, scroll triggers and splitting built in. You pay in bundle weight, and when a few lines of CSS could do the job, it’s a dependency you didn’t need.
For most text effects the first two approaches are enough. Reach for a library when the timeline gets long, not before.
How do GSAP, Anime.js, Typed.js and Motion compare for text?
GSAP has the broadest text toolset, Motion is the lightest for simple reveals, and Anime.js splits and staggers with a small API. Typed.js does one thing, typing.
| Library | Text features | Size and cost | Best fit |
|---|
| GSAP | SplitText, TextPlugin, ScrollTrigger | About 23.5 kB core, free since 2025 | Timelines and scroll-synced headlines |
| Anime.js | splitText, stagger | Modular and tree-shakeable in v4 | Stagger-heavy reveals |
| Typed.js | Typing, backspacing, looping strings | Typing only | One typed headline |
| Motion | animate(), stagger; split text in Motion+ | 2.6 kB mini, 18 kB hybrid; core is MIT | Light reveals, React projects |
Cost changed in 2025. After Webflow’s acquisition, GSAP became free for everyone, commercial use included, along with all former Club plugins such as SplitText (Webflow and GSAP announcements, 2025).
Motion’s own feature table puts split text under Motion+, its one-time-fee membership, while the core library is MIT licensed (npm).
The size figures come from Motion’s GSAP comparison page, which lists GSAP core at about 23.5 kB without tree-shaking. Motion’s docs disagree with themselves slightly: the same comparison page says 3.2 kB for the mini build and 22 kB for the full one in its prose, and the React bundle-size page lists 3.3 kB and 23 kB for useAnimate, so measure your own build output.
For a single typewriter line, I’d take Typed.js or twenty lines of vanilla JavaScript over loading a full animation library.
If you want class-based effects with no animation code at all, a ready-made CSS animations library such as Animate.css pairs well with a splitter like Splitting.js.
How to build a typewriter effect in vanilla JavaScript
Keep the full text in the DOM, reveal it character by character from a timed loop, and cancel the loop on teardown. The steps below get it working.
- Write the final text in the markup, then split it into character spans with Intl.Segmenter so emoji and accented letters stay whole.
- Set every span to opacity 0. The text keeps its final size, so the paragraph never reflows while it types.
- Start a requestAnimationFrame loop. On each frame, work out how many characters should be visible from the elapsed time, then set those spans to opacity 1.
- Mark the newest visible span with a caret (a CSS border or pseudo-element) and let it blink once the loop finishes.
- Cancel the frame request when the element leaves the DOM, and show the full text at once when the user prefers reduced motion.
Computing the count from elapsed time matters. requestAnimationFrame callbacks pause in background tabs, so a loop that adds one character per tick stalls, while an elapsed-time loop catches up the moment the tab returns.
A human rhythm needs a precomputed schedule of reveal times, because a per-tick random delay does not fit an elapsed-time loop.
Appending text with textContent also works, but every new character reflows the line and pushes anything below it. The DOM also holds only part of the sentence until the loop ends.
How do you trigger text animation on scroll, hover or page load?
Start the animation from the event that matches where the text sits. Load events suit headlines already in view, IntersectionObserver suits text further down, and mouse or focus events suit interactive labels.
For page load, start on DOMContentLoaded, because the window load event waits for every image to finish first. For viewport entry, an IntersectionObserver callback starts the effect, then calls unobserve on the element so it runs once.
Scroll-linked animation is GSAP ScrollTrigger’s territory. It ties progress to scroll distance through its scrub option, with start and end positions you set. Hover and focus are the easy ones: mouseenter and focus start the effect, mouseleave and blur reset it.
Text above the fold should animate on load. Waiting for a scroll event leaves it static on the first screen.
IntersectionObserver has worked in every major browser since March 2019 and is Baseline Widely available, according to MDN, so it needs no polyfill.
The threshold option takes a ratio from 0 to 1 for how much of the element must be visible, and rootMargin grows or shrinks the root box on each side. A threshold of 0.2 plus a negative bottom margin delays the start until the text sits clearly inside the viewport.
Text inside a collapsed accordion or hidden tab has no box to intersect, so the observer never fires. Touch screens have no hover, so a hover-only effect needs a tap or viewport-entry fallback.
And hide the initial state with a class that script adds, not in plain CSS. Otherwise visitors with JavaScript off see an empty heading.
How do you keep text animation fast and free of layout shift?
Frame time decides it. Google’s web.dev puts the budget at about 16.7 ms per frame for 60 fps, and past that the frame rate drops and the motion judders.
Split text multiplies the work, because every character span is its own animated box.
Transform and opacity changes can run on the compositor thread, away from the main thread. Color and background-color changes repaint the element. Anything that touches font-size, letter-spacing, width or margin recomputes geometry, and paint and composite then run again (web.dev).
Animated elements work best on their own compositor layer, but web.dev warns that every layer costs memory and management, and that on devices with limited memory the cost can outweigh the benefit. A per-character effect on a long paragraph multiplies those layers.
No published threshold says how many spans is too many. Test on a mid-range phone, not on the machine you built it on.
Layout shift is the other cost. Cumulative Layout Shift counts unexpected movement, and web.dev defines a good score as 0.1 or less at the 75th percentile of page loads.
Typed or rotating text with no reserved space causes it. So does animating width or height instead of using transform: scale(), and so does a late font swap that changes line breaks after the split.
Reserve space with min-height or min-width on the container, and pre-place the characters as in the typewriter build above.
The Chrome DevTools Performance panel shows both problems. Record the animation, then look for frames longer than 16.7 ms and for flagged layout shifts.
How do you make animated text accessible?
Check the reduced-motion setting before animating, keep one readable copy of the text for screen readers, and give looping effects a pause control.
Reduced motion
The prefers-reduced-motion media query is Baseline Widely available since July 2022 and has worked in every major browser since January 2020 (MDN, web-features data).
Its value is reduce, not none. Users expect non-essential motion to go, so the safe version of a typewriter is the finished text shown at once, or a short fade.
Screen readers
Wrapped letters get read one by one. In 2020, Adrian Roselli found the Awwwards site putting every letter in its own div, which screen readers announced letter by letter.
The usual fix goes through ARIA, with aria-label on the parent and aria-hidden on each span. GSAP’s SplitText does this by default, and its documentation says the setting works for the majority of screen readers.
Roselli’s February 2026 tests disagree. His results table lists the text announced correctly in only 2 of 8 screen reader and browser pairings, and JAWS with Chrome never announced it.
The sources diverge on one detail. According to Roselli, GSAP’s demo wraps text in a div, a generic element that prohibits aria-label, while the docs’ example code uses headings, which allow it.
GSAP’s Cassie Evans replied that she would review the docs. She also named two other routes, a screen-reader-only duplicate of the text and reverting the split once the animation ends.
For one-time reveals, reverting is the sturdiest option, because the accessible copy is then the real text and nothing depends on aria support. Looping effects need the duplicate.
WCAG 2.2 requirements
Under the standards for web accessibility, 2.2.2 Pause, Stop, Hide (Level A) requires a control for moving content that starts automatically, lasts more than five seconds and sits beside other content (W3C).
Rotating words and endless typewriter loops fall under it. A reveal that finishes within five seconds does not.
2.3.3 Animation from Interactions (Level AAA) covers motion triggered by hover or scroll, which users must be able to disable unless the motion carries the content itself. W3C’s guidance lists honoring the reduced-motion preference as one way to meet it.
When does text animation break or hurt the page?
Per-letter splitting breaks joined scripts. Arabic letters change shape depending on their neighbors, so one span per letter leaves disconnected letterforms, according to the Framer marketplace documentation for a shape-safe animation component. Persian, Urdu and Syriac are joined the same way.
The same page says per-letter spans also drop Latin ligatures such as fi and ffl. For these scripts, split by word or line, or animate a mask over unsplit text.
Kerning goes too. Letter-level inline-block spans stop the browser from kerning across glyph pairs, so tight pairs loosen and the line visibly shifts at the moment of the split.
Griffo’s splitText documentation calls this visual jumping and measures character positions before splitting to apply margin corrections. Word-level splits keep kerning inside each word.
Animate the headline, not the paragraph under it. A reader scanning for an answer waits on every character that has not appeared yet.
Low-power hardware is the last problem. MDN notes that reducing animation also helps people on low battery or low-end devices, and a per-character effect that runs smoothly on a desktop is the first thing to cut on a budget phone.
Leave the effect off error messages, prices and legal notices. Navigation labels and anything else visitors read on every visit don’t need it either, and neither does any spot where a plain fade does the same job.
JavaScript Text Animation FAQ
Does animated text hurt indexing?
Not when the final text ships in the page’s HTML. Google indexes from rendered HTML after running scripts (Google Search Central), so text built only by script waits for that rendering step.
Put the real text in the markup and animate on top of it.
How do you animate text in React?
Run the animation inside an effect or hook, never during render, and clean it up on unmount. GSAP’s SplitText integrates with the useGSAP hook, and Motion ships React components through its motion/react entry point.
What stagger delay works for a text reveal?
No official standard exists. Pick the total reveal time first, then divide by the number of units: one second across 40 characters means 25 ms per character.
On longer lines, switch from characters to words so the reveal stays quick.
How can you pause, loop or restart a text animation?
Web Animations API objects expose play, pause and reverse methods plus a finished promise, and GSAP timelines add pause() and restart(). Looping is an iteration option in the first case and a repeat value of -1 in the second.
Are Lettering.js and Textillate.js still worth using?
Only on a site that already loads jQuery. Both are jQuery plugins, so anywhere else they add a dependency for work that Splitting.js or a few lines of native script handle.
Choosing a First Effect and Testing It Before Launch
A first JavaScript text animation should be a one-time reveal on a single headline, split by word and driven by CSS with script-set delays.
The trade-off is flair. That scope rules out per-letter flourishes and endless loops.
Build the reveal and the reduced-motion fallback together, run a screen reader pass before adding polish, and profile frames and layout shift on a mid-range phone last.
The order follows cost of change. Splitting structure and the fallback shape every later step, while profiling only tunes them.
Verified October 28, 2026: the advice to revert the split after the effect holds until GSAP publishes the screen reader results table its team floated in reply to Roselli’s February 2026 post.
Before launch, run the finished page through a web accessibility checklist.