Morphing Text

One word in a sentence is swapped for the next word in a list with a slide, flip or fade.

Add a "Word Rotate" effect (also called rotating words or flip words) to [where].
One word in the line should slide up and out while the next word from a list slides in from below, pausing on each word before the next change.
Keep the rest of the line from jumping when the words have different widths, don't make screen readers announce every change, and stop rotating for users who prefer reduced motion.

Existing text is animated out and replaced with new text content.

Add a "Text Replacement" effect (also called text swap) to [where].
When the text changes, the old characters should slide up and out while the new ones slide in from below, one character after another in a quick, smooth ripple.
Keep the text box from jumping in size during the swap, and announce only the new text to screen readers.

The element starts heavily blurred and sharpens into focus, often while sliding or fading in.

Add a "Blur In" entrance animation (also called text focus in, focus in or blur text reveal) to [where].
The content should start heavily blurred and transparent, then sharpen into focus in place: soft and fairly slow, with no movement.
Play it once, and show the text sharp right away when the user prefers reduced motion (prefers-reduced-motion).

Nearby shapes blend into each other like liquid blobs via blur and contrast filtering.

Add a "Gooey Effect" (also called a goo effect or metaballs) to [where].
When the pointer is over it, small blobs should pull away from the main shape, stretching like liquid before breaking free, and flow back and merge smoothly when the pointer leaves.
Apply the blur-and-contrast filter only to the small group of shapes, not the whole page, and show the same effect on keyboard focus and tap.

Text glows like a neon tube and flickers or pulses.

Add a "Neon Glow Text" effect (also called a neon sign flicker or glowing text) to [where].
The text should glow like a neon tube with a soft, steady light, and now and then flicker off briefly like a real sign.
Keep the flicker occasional rather than rapid, since fast flashing can harm some users, and keep the glow steady for users who prefer reduced motion.

Letters of a title shuffle or move sequentially as the user scrolls through sections.

Add "Scrolling Letters" (also called on-scroll letter animations) to [where].
As the user scrolls through the sections, the letters of the title should roll to their next characters one after another from left to right, tied directly to the scroll position.
Scrolling back up should roll them back, and screen readers should get the current title as plain text.

A bright highlight sweeps repeatedly across the letters.

Add a "Shimmer Text" effect (also called animated shiny text or metallic shimmer text) to [where].
A band of light should sweep smoothly across the letters from left to right, then repeat after a short pause.
Keep the text readable under the highlight, and keep it still for users who prefer reduced motion.