List Item Enter/Exit

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.

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.

Die Elemente einer Gruppe animieren nacheinander mit kleiner Verzögerung und bilden eine Welle, statt alle gleichzeitig zu erscheinen.

Füge bei [wo] eine „Stagger“-Animation hinzu (auch staggered animation oder Kaskade genannt).
Die Elemente sollen nacheinander mit kurzer, gleichmäßiger Verzögerung nach oben einblenden, sodass die Gruppe wie eine schnelle Welle wirkt statt alles auf einmal.
Halte die ganze Sequenz auch bei langen Listen kurz, spiele sie nur einmal beim Hineinscrollen ab und zeige bei reduzierter Bewegung (prefers-reduced-motion) alles ohne Animation an.

Wischt man eine Listenzeile zur Seite, erscheinen Aktionsbuttons wie Löschen oder Archivieren.

Füge bei [wo] eine „Swipe to Delete“-Interaktion hinzu (auch swipe actions oder swipe to reveal genannt).
Wird eine Zeile zur Seite gezogen, soll sie direkt dem Finger folgen und dahinter Aktionsbuttons wie Archivieren und Löschen freilegen, bis diese ganz sichtbar sind, und beim Loslassen weich ohne Nachfedern an ihren Platz gleiten.
Halte vertikales Scrollen beim horizontalen Wischen funktionsfähig und mach dieselben Aktionen ohne Wischen per Tastatur und Screenreader erreichbar.

Eine Inhaltszeile läuft in einer endlosen, nahtlosen Schleife seitwärts durch.

Füge bei [wo] eine Laufschrift (Marquee) hinzu – ein endlos horizontal durchlaufendes Band, auch Ticker genannt.
Der Inhalt soll langsam und gleichmäßig von rechts nach links laufen, als nahtlose Schleife ohne sichtbaren Sprung.
Halte sie beim Hovern an und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Ein Dialog blendet über der abgedunkelten Seite ein und wächst dabei leicht aus seiner Mitte.

Füge bei [wo] eine „Modal Scale-Fade In“-Animation hinzu (auch dialog open animation oder zoom-fade dialog genannt).
Der Dialog soll einblenden und dabei leicht aus seiner Mitte wachsen, während die Seite dahinter abdunkelt: schnell und dezent, ohne Nachfedern.
Spiel sie bei jedem Öffnen einmal ab, setz den Fokus in den Dialog und halte ihn dort, und nutze bei reduzierter Bewegung (prefers-reduced-motion) nur ein einfaches Einblenden.