Shared Layout Animation

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.

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.

An underline or pill glides from the old tab to the newly selected tab.

Add a "Tab Indicator Slide" (also called a sliding underline or active tab indicator) to [where].
When a new tab is selected, the underline should glide from the old tab to the new one, quick and smoothly decelerating, stretching to the new tab's width if it differs.
Keep proper tab semantics with arrow-key navigation, and move the indicator without sliding for users who prefer reduced motion.

A card grows into a full detail view, keeping one visible container that reshapes and reveals new content.

Add a "Container Transform" transition (also called card expand to detail or an expandable card) to [where].
When the card is opened, the same container should grow smoothly into the full detail view, its old content fading out quickly and the new content fading in once it has nearly finished growing; closing plays it in reverse.
Keep it one continuous container rather than a crossfade between two separate boxes, and move focus into the detail view when it opens.

A brief message slides or fades in at a screen edge, waits, then leaves; stacked toasts shift to make room.

Add a "Toast Slide-In" (also called a snackbar or toast notification) to [where].
Each message should slide up from the screen edge and fade in, decelerating smoothly; when a new toast arrives, the ones already shown should shift over smoothly to make room.
Announce the message to screen readers without stealing focus, keep it up long enough to read, and pause the auto-dismiss on hover or focus.

A small label fades and nudges into place next to an element after a short hover delay.

Add a "Tooltip Fade" (also called a tooltip reveal) to [where].
After a short hover delay, the label should fade in while nudging slightly into place next to the element, then disappear quickly with no delay when the pointer leaves.
Show it on keyboard focus too, let Escape dismiss it, and connect it to the element so screen readers read it.