Drawer Slide

Ein Panel gleitet vom unteren Rand herein, oft ziehbar und an festen Höhen einrastend.

Füge bei [wo] ein „Bottom Sheet Slide-Up“ hinzu (auch bottom drawer oder sheet genannt).
Das Panel soll vom unteren Rand hochgleiten, während die Seite dahinter abdunkelt, und weich abbremsend ohne Nachfedern an seinem Platz ankommen.
Spiel es bei jedem Öffnen einmal ab, lass es beim Schließen wieder nach unten gleiten und halte den Tastaturfokus im Sheet, solange es offen ist.

Das Element gleitet von jenseits des Containerrands an seine Ruheposition, ohne einzublenden.

Füge bei [wo] eine „Slide In“-Einblendanimation hinzu (auch slide in left, slide in right, slide in up oder slide in down genannt).
Das Element soll von jenseits des Containerrands an seinen Platz gleiten und dabei die ganze Zeit voll deckend bleiben: schnell, sanft abbremsend, ohne Nachfedern.
Schneide es am Containerrand ab, damit es Nachbarelemente nicht überlappt und keine Scrollleisten erzeugt, solange es draußen ist, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) direkt an seinem Platz an.

Die neue Seite gleitet von einer Seite herein, während die alte hinausgleitet; die Richtung folgt der Navigationstiefe.

Füge bei [wo] eine „Slide Page Transition“ hinzu (auch Push / Pop oder Directional Slide genannt).
Beim Vorwärtsgehen soll die neue Seite von der Seite hereinschieben, während die alte zur anderen Seite hinausgleitet; beim Zurückgehen sollen sich beide in die Gegenrichtung bewegen: weich, sanft beschleunigend und abbremsend.
Kopple die Richtung an die Navigationstiefe, auch beim Zurück-Button des Browsers, und verhindere, dass die Seite während des Gleitens seitlich scrollt.

Eine durchscheinende dunkle Ebene blendet hinter einem Overlay ein und dunkelt die Seite ab.

Füge bei [wo] einen „Backdrop Scrim Fade“ hinzu (auch overlay fade oder scrim genannt).
Wenn das Overlay aufgeht, soll eine durchscheinende dunkle Ebene sanft über der Seite dahinter einblenden, etwas langsamer als das Overlay selbst, und beim Schließen wieder ausblenden.
Halte den Scrim im hellen wie im dunklen Theme dunkel und verhindere, dass die Seite dahinter scrollt oder Klicks annimmt, solange er sichtbar ist.

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.

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