Text Path Scroll

An element travels along a custom curved path and can rotate to follow it.

Add a "Motion Path" animation (also called animate along path) to [where].
A small element should travel along a custom curved route at a slow, steady pace, turning to face the direction it is moving.
Use a closed route so the loop repeats without a jump, and make the route scale with its container instead of staying at a fixed size.

Text is set around a circle that rotates continuously.

Add "Spinning Text" (also called circular text or text on circle) to [where].
Letters should be spaced evenly around a circle that turns slowly and steadily, with no jump when the loop restarts.
Give screen readers the text once as plain text, and stop the rotation for users who prefer reduced motion.

Large text lines slide horizontally as the page is scrolled vertically.

Add a "Text Marquee on Scroll" (also called a scroll text marquee or scroll velocity text) to [where].
Large lines of text should slide sideways as the page scrolls down, with alternate rows moving in opposite directions, and slide back when scrolling up.
Tie the movement to the scroll position, keep the long lines from causing a horizontal scrollbar, and keep them still for users who prefer reduced motion.

A word is duplicated into many stacked copies that shift with scroll.

Add a "Text Repetition" effect (also called repeated text scroll) to [where].
A word should be copied into a stack of fainter outline copies that spread out from behind it as the user scrolls, and fold back together when scrolling up.
Tie the spread directly to the scroll position, and hide the extra copies from screen readers so the word is read only once.

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.

Words of a paragraph go from dim to full opacity as the user scrolls.

Add a "Text Reveal" effect (also called scroll text reveal or word-by-word reveal) to [where].
The paragraph should start dim, and as the user scrolls each word should brighten to full strength one after another, tied to the scroll position.
Scrolling back up should dim the words again, and the whole paragraph should stay available to screen readers whatever its dimming.