Bottom Sheet Slide-Up

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 element glides in from off its container edge to its resting position without fading.

Add a "Slide In" entrance animation (also called slide in left, slide in right, slide in up or slide in down) to [where].
The element should glide in from beyond its container edge to its resting place, fully opaque the whole time: quick, decelerating smoothly with no bounce.
Clip it at the container edge so it doesn't overlap neighbours or cause scrollbars while it is outside, and show it in place when the user prefers reduced motion (prefers-reduced-motion).

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.

Dragging a list down reveals a spinner and reloads the content on release.

Add a "Pull to Refresh" interaction (also called swipe to refresh) to [where].
When the list is pulled down from the top it should follow the finger with some resistance and reveal a spinner that turns as it is pulled; on release the spinner keeps spinning while the content reloads, then the list slides smoothly back up.
Only start it when the list is already scrolled to the top, and give keyboard and screen reader users a regular refresh control too.

Slides stay in place and dissolve into each other instead of sliding.

Add a "Carousel Crossfade" (also called a fade slideshow or carousel fade) to [where].
Slides should stay in place and slowly dissolve into one another, the old one fading out while the next fades in at the same time, then hold for a few seconds before the next change.
Loop seamlessly back to the first slide, pause on hover or focus, and don't auto-advance for users who prefer reduced motion.

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