Clip Reveal

An image is uncovered by a shrinking cover or expanding mask edge.

Add an "Image Reveal Wipe" (also called a mask reveal or clip-path reveal) to [where].
As the image scrolls into view, a cover should wipe away from one side and smoothly uncover it in step with the scroll, so it is fully open well before it leaves the screen.
Reserve the image's space so the layout does not jump, and show the image fully uncovered for users who prefer reduced motion.

A masked shape wipes or follows the pointer to uncover content beneath.

Add an "SVG Mask Reveal" hover effect (also called a clip-path reveal or spotlight mask) to [where].
While the pointer is over it, a circular mask should grow from the center and uncover the content underneath, then close again when the pointer leaves: smooth and fairly quick.
Keep both layers exactly the same size so nothing shifts, and show the same reveal on keyboard focus and tap.

Text slides up from behind a clipping line so it looks like it emerges from nowhere.

Add a "Mask Reveal" text entrance (also called line mask reveal or text masking) to [where].
Each line should slide up from behind an invisible edge so it seems to emerge from nowhere, one line after another, quick and smooth without bounce.
Play it once when the text scrolls into view, and show the text right away without motion for users who prefer reduced motion.

Solid panels sweep across the screen to cover the old page, then retract to reveal the new one.

Add a "Curtain / Panel Wipe" page transition (also called a page wipe or staggered panels) to [where].
Solid panels should sweep in one after another to cover the old page, the page should switch while it is fully covered, and the panels should carry on out of view to reveal the new one: bold and smooth.
Never show the new page before the panels have covered the old one, and use a plain fade instead for users who prefer reduced motion.

The element goes from fully transparent to fully opaque in place, or the reverse when leaving.

Add a "Fade In / Fade Out" animation (also called fade) to [where].
The element should go from fully transparent to fully visible in place when it appears, and fade back out the same way when it leaves: gentle, with no movement or scaling.
Once it has faded out, make sure it can no longer be clicked or reached with the keyboard, and switch instantly when the user prefers reduced motion (prefers-reduced-motion).

The element fades in while drifting a short distance from one side into its final position.

Add a "Fade In Directional" entrance animation (also called fade in left, fade in right or fade in down) to [where].
The element should fade in while drifting a short distance from one side into its final position: quick and smooth, easing out as it lands, without bounce.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).

The element fades away while drifting off in one direction.

Add a "Fade Out Directional" exit animation (also called fade out up or fade out down) to [where].
The element should fade away while drifting a short distance in one direction: quick, speeding up as it leaves.
Remove it from the layout only after the fade ends so neighbouring content doesn't jump early, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).