Curtain / Panel Wipe

A full-screen intro layer with a logo or counter slides or fades away to reveal the site.

Add a "Preloader Curtain Lift" (also called a splash screen or intro loader) to [where].
A full-screen intro layer should hold while a loading bar fills, then slide up and away smoothly to reveal the site, which settles gently into place beneath it.
Play it only on the first load, never hold the page longer than loading actually takes, and skip it for users who prefer reduced motion.

The background opens or closes like shutters from the center or the edges on hover.

Add a "Shutter Fill" hover effect (also called shutter) to [where].
The new background color should open from a line down the center out to both sides like shutters, and close back to the center when the pointer leaves, while the label color switches to stay readable: smooth and quick.
Keep the fill clipped inside the element and the label above it, and show the same effect on keyboard focus.

A clip-path or mask grows from an edge or point so the image or text is progressively uncovered.

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).

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.

The outgoing content fades out completely, then the incoming content fades in with a slight scale.

Add a "Fade Through" page transition (also called a fade-through transition or out-in route transition) to [where].
The outgoing content should fade out quickly and completely first, then the incoming content should fade in while scaling up slightly into place.
Never let the two overlap, and keep the incoming content's layout from shifting while it scales.

Outgoing and incoming content move together along the X, Y or Z axis with fades to show spatial relation.

Add a "Shared Axis" page transition (also called shared axis X/Y/Z) to [where].
Moving forward, the old content should slide a short way to one side and fade out quickly while the new content slides in from the other side and fades in just after; moving back reverses the direction.
Keep the travel short so it only hints at direction, and match the axis to the navigation: sideways for siblings, vertical for steps, depth for drilling in.