Drawer Slide

A panel slides up from the bottom edge, often draggable and snapping to heights.

Add a "Bottom Sheet Slide-Up" (also called a bottom drawer or sheet) to [where].
The panel should slide up from the bottom edge while the page behind it dims, decelerating smoothly into place without a bounce.
Play it once each time the sheet opens, slide it back down on close, and keep keyboard focus inside the sheet while it is open.

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

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.

A translucent dark layer fades in behind an overlay to dim the page.

Add a "Backdrop Scrim Fade" (also called an overlay fade or scrim) to [where].
When the overlay opens, a translucent dark layer should fade in softly over the page behind it, a little slower than the overlay itself, and fade out again when it closes.
Keep the scrim dark in both light and dark themes, and stop the page behind it from scrolling or taking clicks while it is shown.

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.

Items fade and slide in when added and animate out when removed while neighbours close the gap.

Add a "List Item Enter/Exit" animation (also called an animated list) to [where].
A new item should first open up its space and then fade and slide in; a removed item should fade out first and then collapse so its neighbours close the gap smoothly.
Keep a removed item in place until its exit has finished, so the list never jumps when items are added or removed.

A row of content slides sideways in an endless, seamless loop.

Add a "Marquee" (an infinite horizontal scroll, also called a ticker) to [where].
The content should slide from right to left at a slow, steady speed in a seamless loop with no visible jump.
Pause it on hover, and stop the motion when the user prefers reduced motion (prefers-reduced-motion).