Also called Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
A heading is split into characters, words or lines that animate in one after another with a small delay.
Use for
Headlines, section titles
Add a "Split Text Stagger" entrance (also called letter stagger or staggered text reveal) to [where].
Split the heading into letters that rise and fade in one after another with a short delay between them, quick and smooth without bounce.
Play it once when the heading comes into view, keep it read as one word by screen readers, and show it without motion for users who prefer reduced motion.
Also called Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
A clip-path or mask grows from an edge or point so the image or text is progressively uncovered.
Use for
Image and headline reveals
Add a "Clip Reveal" entrance effect (also called mask reveal, wipe reveal or image reveal) to [where].
A clipping edge should sweep across from left to right so the content is uncovered progressively while it stays still: smooth, starting and ending softly.
Reserve the element's space from the start so nothing shifts, and show it fully uncovered when the user prefers reduced motion (prefers-reduced-motion).
Also called Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
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.