Drag-to-Reorder List

Nach einer Layoutänderung gleiten die Elemente weich an ihre neuen Positionen und Größen.

Füge bei [wo] eine „FLIP Layout Animation“ hinzu (auch layout animation oder First-Last-Invert-Play genannt).
Wenn sich das Layout ändert, soll jedes Element von seiner alten Position zur neuen gleiten statt zu springen, anfangs schnell und dann sanft einrastend.
Animiere nur mit Transforms, damit die Seite nicht in jedem Frame neu umbricht, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) direkt zum neuen Layout.

Einträge blenden beim Hinzufügen gleitend ein und beim Entfernen animiert aus, während die Nachbarn die Lücke schließen.

Füge bei [wo] eine „List Item Enter/Exit“-Animation hinzu (auch animated list genannt).
Ein neuer Eintrag soll zuerst seinen Platz öffnen und dann gleitend einblenden; ein entfernter Eintrag soll zuerst ausblenden und dann zusammenklappen, sodass die Nachbarn die Lücke weich schließen.
Lass einen entfernten Eintrag an seinem Platz, bis sein Ausblenden fertig ist, damit die Liste beim Hinzufügen oder Entfernen nie springt.

Ein Element folgt beim Ziehen dem Zeiger und lässt sich auf einen Bereich oder eine Achse begrenzen.

Füge bei [wo] eine „Drag“-Interaktion hinzu (auch draggable oder drag constraints genannt).
Das Element soll beim Ziehen direkt dem Zeiger folgen, an den Rändern seines erlaubten Bereichs anhalten und beim Loslassen mit einem kleinen Nachfedern an seinen Ruheplatz zurückspringen.
Sorge dafür, dass es mit Touch ebenso wie mit der Maus funktioniert, ohne dass die Seite darunter scrollt, und biete eine Möglichkeit, es mit der Tastatur zu bewegen.

Beim Filtern oder Sortieren ordnen sich Rasterkacheln neu an, blenden aus oder gleiten an neue Plätze.

Füge bei [wo] einen „Masonry / Grid Shuffle“-Effekt hinzu (auch filterable grid animation genannt).
Wenn ein Filter angewendet wird, sollen die Kacheln, die nicht mehr passen, an ihrem Platz schrumpfen und ausblenden, während die übrigen weich an ihre neuen Plätze gleiten; beim Zurücksetzen des Filters läuft es rückwärts.
Verhindere, dass die umgebende Seite springt, während sich die Höhe des Rasters ändert, und mach die Filter zu echten Buttons, die angeben, welcher Filter ausgewählt ist.

Ein Seitenpanel gleitet vom linken, rechten oder oberen Rand herein und schiebt oder überdeckt den Inhalt.

Füge bei [wo] einen „Drawer Slide“ hinzu (auch off-canvas oder side sheet genannt).
Das Panel soll vom seitlichen Rand über den Inhalt hereingleiten, während die Seite dahinter abdunkelt, schnell und weich abbremsend, und beim Schließen auf demselben Weg wieder hinausgleiten.
Halte den Tastaturfokus im offenen Drawer, schließ ihn mit Escape oder einem Klick auf den abgedunkelten Bereich und gib den Fokus an den Button zurück, der ihn geöffnet hat.