Pointer Highlight

A marker-style colour band draws across a phrase to emphasise it.

Add a "Text Highlighter" effect (also called highlight marker or marker underline) to [where].
A marker-style color band should sweep smoothly behind the key phrase from left to right, like someone highlighting it with a pen.
Play it once when the phrase scrolls into view, keep the text readable on top of the band, and let the band follow the phrase correctly when it wraps onto two lines.

An underline grows from one side or the centre under a link on hover.

Add an "Underline Draw" hover effect (also called animated underline or hover underline animation) to [where].
When the pointer is over the link, an underline should grow smoothly from left to right under the text, and shrink back when the pointer leaves: quick and subtle.
Keep the underline from shifting the surrounding layout, and show the same effect on keyboard focus.

An SVG stroke appears to be drawn along its path as the dash offset animates.

Add a "Line Drawing" animation (also called path drawing or a self-drawing SVG) to [where].
Each stroke should appear to draw itself smoothly along its path from start to end, with a second stroke such as a checkmark following right after the first.
Play it once when it comes into view rather than looping, and show the fully drawn lines to users who prefer reduced motion.

The element shrinks slightly while pressed and springs back on release.

Add a "Press (Button Tap Scale)" effect (also called tap feedback or press state) to [where].
While it is pressed the element should shrink slightly and darken a touch, then spring back to full size with a small bounce on release: quick and subtle.
Show the same feedback for keyboard presses and touch, and keep the surrounding layout from shifting.

Dragging a list down reveals a spinner and reloads the content on release.

Add a "Pull to Refresh" interaction (also called swipe to refresh) to [where].
When the list is pulled down from the top it should follow the finger with some resistance and reveal a spinner that turns as it is pulled; on release the spinner keeps spinning while the content reloads, then the list slides smoothly back up.
Only start it when the list is already scrolled to the top, and give keyboard and screen reader users a regular refresh control too.

A circular wave expands and fades from the exact point of the click or tap.

Add a "Ripple" effect (also called a material ripple or ink ripple) to [where].
On each click or tap, a soft circular wave should spread out from the exact point that was pressed until it covers the element, fading as it grows: quick and light.
Clip the wave to the element's shape, let rapid presses each start their own ripple, and start it from the center for keyboard presses.