Drag-to-Reorder List (arrastrar para reordenar)

Los elementos se deslizan con suavidad a sus nuevas posiciones y tamaños después de un cambio de diseño.

Añade una "FLIP Layout Animation" (también llamada layout animation o First-Last-Invert-Play) en [dónde].
Cuando cambie el diseño, cada elemento debe deslizarse de su posición anterior a la nueva en lugar de saltar, rápido al principio y asentándose con suavidad.
Anima solo con transforms para que la página no recalcule el diseño en cada fotograma, y pasa directamente al nuevo diseño si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los elementos aparecen deslizándose al añadirse y salen animados al eliminarse mientras los vecinos cierran el hueco.

Añade una animación "List Item Enter/Exit" (también llamada animated list) en [dónde].
Un elemento nuevo debe abrir primero su espacio y luego aparecer deslizándose; un elemento eliminado debe desvanecerse primero y luego plegarse para que sus vecinos cierren el hueco con suavidad.
Mantén el elemento eliminado en su sitio hasta que termine su salida, para que la lista nunca salte al añadir o quitar elementos.

Un elemento sigue al cursor al arrastrarlo y puede limitarse a un área o a un eje.

Añade una interacción de arrastrar (Drag) en [dónde], también llamada draggable o drag constraints.
El elemento debe seguir al cursor directamente mientras se arrastra, detenerse en los bordes de su área permitida y volver a su posición de reposo con un pequeño rebote al soltarlo.
Haz que funcione tanto con toque como con ratón sin que la página se desplace debajo, y ofrece una forma de moverlo con el teclado.

Las piezas de la cuadrícula se reordenan, se desvanecen o se deslizan a nuevas posiciones al aplicar un filtro u orden.

Añade un efecto "Masonry / Grid Shuffle" (también llamado filterable grid animation) en [dónde].
Al aplicar un filtro, las piezas que ya no coincidan deben encogerse y desvanecerse en su sitio mientras las restantes se deslizan con suavidad a sus nuevas posiciones; al quitar el filtro se reproduce a la inversa.
Evita que la página de alrededor salte mientras cambia la altura de la cuadrícula, y haz que los controles de filtro sean botones reales que indiquen qué filtro está seleccionado.

Un panel lateral entra deslizándose desde el borde izquierdo, derecho o superior, empujando o cubriendo el contenido.

Añade un "Drawer Slide" (también llamado off-canvas o side sheet) en [dónde].
El panel debe entrar deslizándose desde el borde lateral sobre el contenido mientras la página de detrás se oscurece, rápido y frenando con suavidad, y salir igual al cerrarse.
Mantén el foco del teclado dentro del panel abierto, ciérralo con Escape o con un clic en la zona oscurecida, y devuelve el foco al botón que lo abrió.