List Item Enter/Exit

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.

Grid tiles rearrange, fade out or slide into new slots when a filter or sort is applied.

Add a "Masonry / Grid Shuffle" effect (also called a filterable grid animation) to [where].
When a filter is applied, the tiles that no longer match should shrink and fade out in place while the remaining tiles slide smoothly into their new slots; clearing the filter plays it back.
Keep the surrounding page from jumping while the grid changes height, and make the filter controls real buttons that expose which filter is selected.

Items in a group animate one after another with a small delay, forming a wave instead of appearing all at once.

Add a "Stagger" animation (also called staggered animation or cascade) to [where].
Items should fade up one after another with a short, even delay, so the group appears as a quick wave instead of all at once.
Keep the whole sequence brief even for long lists, animate once when it scrolls into view, and skip the motion when the user prefers reduced motion (prefers-reduced-motion).

Swiping a list row sideways reveals action buttons such as delete or archive.

Add a "Swipe to Delete" interaction (also called swipe actions or swipe to reveal) to [where].
Dragging a row sideways should slide it directly with the finger to uncover action buttons such as archive and delete behind it, stopping once they are fully shown, and on release it glides smoothly into place without bounce.
Keep vertical scrolling working while swiping horizontally, and make the same actions reachable by keyboard and screen readers without swiping.

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

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.