Shared Axis

The new page slides in from one side while the old page slides out, with direction following navigation depth.

Add a "Slide Page Transition" (also called push / pop or a directional slide) to [where].
Going forward, the new page should push in from the side while the old page slides out the other way; going back, both should move in the opposite direction: smooth, easing in and out.
Tie the direction to navigation depth, including the browser's back button, and keep the page from scrolling sideways during the slide.

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

A matching element, such as a thumbnail, morphs in position and size from one page to the next.

Add a "Shared Element Transition" (also called a hero transition or view-transition-name morph) to [where].
When moving to the next page, the matching element, such as a thumbnail, should smoothly move and grow into its place on the new page while the rest of the content crossfades, and shrink back when returning.
Give the matching elements on both pages one shared identity so they pair up correctly, and fall back to a plain crossfade where the browser can't morph them.