Drag-to-Reorder List

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.

An element follows the pointer when dragged and can be limited to an area or an axis.

Add a "Drag" interaction (also called draggable or drag constraints) to [where].
The element should follow the pointer directly while dragged, stop at the edges of its allowed area, and spring back to its resting place with a small bounce when released.
Make it work with touch as well as a mouse without the page scrolling underneath, and offer a keyboard way to move it.

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.

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.