Slide Page Transition

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.

Slides move horizontally past a viewport, snapping one item into place at a time.

Add a "Carousel Slide" (also called a slider or swipe carousel) to [where].
Each step should slide the row sideways so the next slide snaps into the center, smooth and decelerating, with the neighbours peeking at the edges and the position dots following along.
Move one slide at a time, support swipe on touch as well as buttons and arrow keys, and keep the controls labelled for screen readers.

A side panel slides in from the left, right or top edge, pushing or overlaying content.

Add a "Drawer Slide" (also called off-canvas or a side sheet) to [where].
The panel should slide in from the side edge over the content while the page behind dims, quick and smoothly decelerating, and slide back out the same way when closed.
Keep keyboard focus inside the open drawer, close it with Escape or a click on the dimmed area, and return focus to the button that opened it.

The old page fades out as the new page fades in over the same area.

Add a "Crossfade Page Transition" (also called a cross-dissolve or fade transition) to [where].
On navigation, the old page should fade out while the new page fades in over the same area at the same time: soft and fairly quick.
Keep both pages in the same spot so nothing shifts during the fade, and move focus to the new page's main heading after the change.

The old page scales up or down and fades while the new page scales into place.

Add a "Zoom Page Transition" (also called a scale transition or zoom in / out) to [where].
Drilling in, the old page should scale up slightly and fade out while the new page grows from slightly smaller into place; going back, it should zoom out the opposite way: smooth and quick.
Keep the scaling subtle so the content stays readable throughout, and use a plain fade for users who prefer reduced motion.

The new view is revealed inside a circle that expands from the click point.

Add a "Circular Reveal" transition (also called a clip-path circle expand or theme toggle reveal) to [where].
The new view should appear inside a circle that grows outward from the pressed control until it covers the whole area: smooth and steady, easing in and out.
Start the circle exactly where the control was pressed, and switch instantly without the circle for users who prefer reduced motion.