Container Transform

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.

A thumbnail scales up from its place into a large centered view over a dimmed backdrop.

Add a "Lightbox Zoom" (also called an image zoom overlay or Medium-style zoom) to [where].
Clicking a thumbnail should make it grow smoothly from its own place into a large centered view while the page behind fades back, and closing should shrink it back into the same place.
Close it with Escape or a click on the backdrop, move focus into the view while it is open, and return focus to the thumbnail afterward.

An element appears to move and resize into a matching element in a new spot, sharing one identity.

Add a "Shared Layout Animation" (also called an in-page shared element) to [where].
When the selection changes, the element should appear to move and resize smoothly from its old spot into its new one, easing gently into place, so it reads as one object rather than two.
Show only one copy at any moment, and keep the surrounding layout from jumping while it moves.

A dialog fades in while scaling up slightly from its center over a dimmed page.

Add a "Modal Scale-Fade In" animation (also called a dialog open animation or zoom-fade dialog) to [where].
The dialog should fade in while scaling up slightly from its center as the page behind it dims: quick and subtle, with no bounce.
Play it once each time the dialog opens, move focus into it and keep it there, and use a plain fade for users who prefer reduced motion.

Dragging an item makes others slide out of the way and settle in the new order.

Add a "Drag-to-Reorder List" (also called a sortable list) to [where].
The dragged item should follow the pointer directly and lift slightly, while the other items slide smoothly out of its way; on release it should settle quickly into the nearest slot.
Support touch as well as mouse, and offer a keyboard way to move items with the new position announced to 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.

Elements glide smoothly to their new positions and sizes after the layout changes.

Add a "FLIP Layout Animation" (also called a layout animation or First-Last-Invert-Play) to [where].
When the layout changes, each element should glide from its old position to its new one instead of jumping, quick at first and easing gently into place.
Animate with transforms only so the page doesn't reflow on every frame, and switch straight to the new layout for users who prefer reduced motion.