Tab Indicator Slide

Ein Element scheint sich in ein passendes Element an neuer Stelle zu bewegen und seine Größe anzupassen, als wäre es dasselbe.

Füge bei [wo] eine „Shared Layout Animation“ hinzu (auch In-Page Shared Element genannt).
Wenn sich die Auswahl ändert, soll das Element sanft von seiner alten Position an die neue gleiten und dabei seine Größe anpassen, weich einrastend, sodass es als ein Objekt wirkt statt als zwei.
Zeige immer nur eine Kopie und verhindere, dass das umgebende Layout während der Bewegung springt.

Ein hervorgehobener Hintergrund gleitet in einem Raster zwischen den Karten und folgt der jeweils gehoverten Karte.

Füge bei [wo] einen „Card Hover Effect“ hinzu (auch sliding highlight card grid genannt).
Ein weicher, hervorgehobener Hintergrund soll hinter der gehoverten Karte erscheinen, fließend zur nächsten Karte gleiten, auf die der Zeiger wechselt, und ausblenden, wenn der Zeiger das Raster verlässt.
Lass den Tastaturfokus die Hervorhebung genauso bewegen und halte die Karten selbst an ihrem Platz.

Ein runder Knopf gleitet über eine Schiene, und die Farbe der Schiene wechselt zwischen aus und an.

Füge bei [wo] eine „Toggle Switch“-Animation hinzu (auch switch genannt).
Beim Ein- oder Ausschalten soll der runde Knopf weich ans andere Ende der Schiene gleiten, während die Farbe der Schiene wechselt: schnell und knackig, ohne Nachfedern.
Mach ihn zu einem echten barrierefreien Schalter (role="switch" mit seinem checked-Zustand), der auch mit der Tastatur funktioniert.

Eine Linie gleitet von der Unter- oder Oberkante an ihren Platz und unter- oder überstreicht das Element.

Füge bei [wo] einen „Underline Reveal“-Hover-Effekt hinzu (auch overline reveal oder reveal genannt).
Eine Linie über die volle Breite soll von knapp unterhalb der Unterkante nach oben an ihren Platz gleiten, solange der Zeiger über dem Element ist, und beim Verlassen wieder nach unten aus dem Blick gleiten: schnell und weich.
Schneide die Linie an der Kante ab, damit sie durch Gleiten erscheint statt durch Einblenden oder Wachsen, und zeige denselben Effekt beim Tastaturfokus.

Eine kurze Meldung gleitet oder blendet am Bildschirmrand ein, bleibt kurz und verschwindet dann; gestapelte Toasts rücken zur Seite, um Platz zu machen.

Füge bei [wo] einen „Toast Slide-In“ hinzu (auch Snackbar oder Toast Notification genannt).
Jede Meldung soll vom Bildschirmrand hochgleiten und dabei einblenden, sanft abbremsend; kommt ein neuer Toast hinzu, sollen die bereits sichtbaren sanft zur Seite rücken, um Platz zu machen.
Kündige die Meldung für Screenreader an, ohne den Fokus zu stehlen, lass sie lange genug zum Lesen stehen und pausiere das automatische Schließen bei Hover oder Fokus.

Ein kleines Label blendet nach kurzer Hover-Verzögerung neben einem Element ein und rückt dabei leicht an seinen Platz.

Füge bei [wo] einen „Tooltip Fade“ hinzu (auch Tooltip Reveal genannt).
Nach einer kurzen Hover-Verzögerung soll das Label einblenden und dabei leicht neben das Element rücken, dann ohne Verzögerung schnell verschwinden, sobald der Zeiger es verlässt.
Zeige ihn auch bei Tastaturfokus, lass ihn mit Escape schließen und verknüpfe ihn mit dem Element, damit Screenreader ihn vorlesen.

Ein Inhaltsbereich wächst beim Umschalten seiner Kopfzeile weich auf volle Höhe oder schrumpft auf null.

Füge bei [wo] ein Akkordeon (Accordion Expand-Collapse) hinzu, auch collapse oder disclosure genannt.
Wenn eine Kopfzeile gedrückt wird, soll ihr Bereich weich auf die volle Höhe seines Inhalts wachsen und beim nächsten Drücken wieder ganz zuklappen, während sich der Pfeil in der Kopfzeile passend dreht: schnell und weich, ohne Nachfedern.
Animiere auf die echte Höhe des Inhalts statt auf einen festen Schätzwert, mach die Kopfzeile zu einem echten Button, der seinen aufgeklappten Zustand angibt, und sorg dafür, dass alles per Tastatur funktioniert.