Splitting.js CSS Stagger — Per-Character Text Animation

Almost every per-character text animation on the web is driven by a JavaScript timeline: a library splits the text, then the same library animates each piece on a stagger. That works, but it means the animation lives in your bundle, runs on the main thread, and cannot be restyled without editing code.

Splitting.js takes a different position, and it is the reason to choose it over a full animation library. Splitting.js does not animate anything. It splits text into elements and writes CSS custom properties onto them. Every effect after that is plain CSS.

What it actually produces

One call — Splitting() — finds every element carrying data-splitting and rewrites its contents. This:

<h1 data-splitting>Motion</h1>

becomes a nest of <span class="word"> and <span class="char"> elements, each character carrying:

- --char-index — its position in the element, zero-based - --char-total — how many characters there are in total - a data-char attribute holding the character itself

That is the entire API surface being used here, and it is enough to build effects that would otherwise need a timeline library.

Staggering with arithmetic instead of a timeline

The stagger is one CSS declaration:

animation-delay: calc(var(--char-index) * 34ms)

Character 0 starts immediately, character 10 starts 340ms in. There is no loop, no per-element JavaScript, and no timeline object held in memory. The browser schedules all of it, which means the animations run off the main thread wherever the animated properties allow it, and they keep working if your JavaScript later throws.

The effect that shows why --char-total matters

Three of the four effects here only use the index. The fourth uses both, and it is the one that demonstrates the real ceiling of this technique:

color: hsl(calc(190 + var(--char-index) / var(--char-total) * 170), 92%, 68%)

Dividing index by total gives a 0–1 position within the string, which is then mapped across a 170-degree sweep of hue. The result is a gradient distributed evenly across the characters — and because it is derived rather than hard-coded, it stays correct if you rewrite the headline to be twice as long. No JavaScript recalculates anything. This is the trick worth taking away: any per-character value that can be expressed as arithmetic on position can be pure CSS.

The two CSS rules that are not optional

.char { display: inline-block } — inline elements ignore transform entirely. Leave this out and every transform-based effect silently does nothing while opacity effects still work, which is a genuinely confusing way to debug. .word { display: inline-block } does the same job at word level and has the bonus of keeping words from breaking mid-way across lines.

perspective: 800px on the title plus transform-style: preserve-3d on the characters is what makes the flip effect read as rotation in depth rather than a vertical squash. Without a perspective ancestor, rotateX(-92deg) is an orthographic projection — the character simply flattens to nothing.

Replaying a CSS animation

A CSS animation runs once when its class is applied and will not replay just because the class is re-added in the same frame. playEffect() handles this with the standard reflow trick:

EFFECTS.forEach(remove); void title.offsetWidth; title.classList.add(name);

Reading offsetWidth forces a synchronous layout, which makes the browser commit the class removal before the addition. Skip it and clicking the already-active effect does nothing at all, because as far as the style engine is concerned the class never left.

Accessibility

Splitting.js fragments text into dozens of spans, which historically wrecked screen-reader output — assistive tech would read individual letters. Modern screen readers handle inline-block spans inside a heading correctly and announce the full string, but the safe production pattern is to keep the original text in an aria-label on the heading and mark the split output aria-hidden. For anything longer than a headline, that is not optional. A prefers-reduced-motion block that sets animation: none on .char should also ship with this.

Reusing it

Add data-splitting to any element, call Splitting() once after the DOM is ready, and write your effect as a keyframe plus a calc() delay. Splitting also exposes --word-index and --line-index if you would rather stagger by word or by line — the same arithmetic applies. Compare it with GSAP SplitText when you need a real timeline with scrubbing and reversal, or text generate for a simpler word-by-word reveal.