Text animation examples: text change animation, kinetic typography, flip, loading and typewriter effects, with and without JavaScript

This guide is about text on a web page, not video. If you landed here looking for After Effects or a motion-graphics template, the techniques below will not help; everything here runs in a browser, on a real heading or paragraph.

Text animation on the web vs text animation in video: where this guide applies

Video text animation is composited frame by frame in an editor and exported as a clip. Web text animation animates real HTML text with CSS and JavaScript: it stays selectable, searchable and read by screen readers, and it has to work the first time a visitor sees the page, not on a loop.

Types of text animations with live examples

Five patterns cover most of what you will want on a page. Each is built a different way, and the plugin has an animation for all of them except the first — words that cycle inside a headline:

Type	How it reads	Built with
Text change / rotating	One word swaps inside a still headline, on a timer.	Fade or slide a word out and in
Kinetic typography	Words scale, slide or rotate in sequence as the message plays.	CSS transforms on split text, timed
Flip / slide	A word or letter rotates on its axis, or slides in from a direction.	Transform only — cheap, no reflow
3D text	A heading tips or rotates in depth.	Perspective + a Z-axis rotation
Animated text box	A box or label reveals its content with a wipe or a mask.	Mask or width reveal on a small element

Text change and rotating text: words that swap inside a headline

One word cycles through a short list ("for Bricks", "for Etch", "for Gutenberg") while the rest of the heading stays still, keeping the surrounding text in normal flow so nothing reflows.

Kinetic typography and motion text

Kinetic typography is text that moves as part of the message — a line sliding in letter by letter, a phrase rotating into place — built with CSS transforms on split text, timed in sequence.

Flip, slide and jitter text animations

A flip rotates a word or letter on its axis; a slide moves text in from a direction; a jitter adds a small, fast wobble. All three are transform-based, so they stay cheap and never shift the layout.

3D text animation

Perspective plus a Z-axis rotation turns a flat heading into something that tips or rotates in depth — dramatic, and easy to overdo: reserve it for one headline, not every one.

Animated text boxes and text loading animations

A text box that reveals with a wipe or a mask, or a short loading beat on a label before the real text appears — a flourish for a button or a stat, not the main heading treatment.

Typewriter and typing text animation: CSS steps(), JavaScript, and what the plugin covers today

A classic typewriter effect types a line of text one character at a time, usually with a blinking cursor. In CSS alone, it is done by animating the width of a monospace line with the step timing function, so each step reveals exactly one character:

.typewriter {
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid;
  width: 0;
  animation: type 2s steps(20, end) forwards,
             blink 0.75s step-end infinite;
}

@keyframes type {
  to { width: 20ch; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

A JavaScript typewriter adds one character at a time with setInterval or requestAnimationFrame, which lets the speed vary per letter or react to the real text length.

In Bricks you need neither snippet: Typewriter is one of the text animations in the panel, with its own time and delay. It is what types the message in the assistant demo on the AI animations page.

JavaScript text animation: splitting text, animating words and letters, and the libraries people reach for

Most JavaScript text effects start the same way: split the text into words or letters, wrap each piece in its own element, then animate those pieces with a small delay between them (a stagger). People reach for a splitting library to avoid writing that part by hand; the split itself is also the part that most easily breaks accessibility if the original text node disappears from the DOM.

Text animations without writing JavaScript: reveal by words and lines with Fancy Animations in Bricks

Pitfalls: accessibility, broken DOM, readability and performance

A letter split is the right unit for a short headline, and it is what Fancy Animations does by default. On a long paragraph it turns the text into hundreds of single-letter spans, which is heavier for the browser and noisier for assistive tech: switch that element to words or lines. And never let the animation hide the real text permanently if JavaScript fails to run — the heading should read correctly with no script at all, just without the motion.

Go further: text animations for Bricks, Etch and Gutenberg

Text animations has every reveal live, and the same panel works in Etch and Gutenberg; pair it with stagger when several headings or list items should enter one after another.