Swipe to Delete

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.

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.

Karten liegen leicht versetzt übereinander, und die oberste weicht zur Seite, um die nächste freizugeben.

Füge bei [wo] einen „Card Stack“ hinzu (auch stacked cards genannt).
Staple die Karten leicht versetzt hintereinander; jeder Klick soll die oberste Karte zur Seite schwingen und hinten einreihen, während die übrigen nachrücken: weich, leicht und flott.
Mach es per Tastatur bedienbar, lass Screenreader jede Karte der Reihe nach erreichen und nutze bei reduzierter Bewegung (prefers-reduced-motion) eine einfache Überblendung.

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.

Das Produktbild schrumpft und fliegt im Bogen in das Warenkorb-Symbol.

Füge bei [wo] eine „Add to Cart Fly“-Animation hinzu (auch fly to cart oder add-to-cart animation genannt).
Beim Drücken des Hinzufügen-Buttons soll eine kleine Kopie des Produktbilds schrumpfen, während sie in einem weichen, schnellen Bogen in das Warenkorb-Symbol fliegt, und der Warenkorb soll kurz anstupsen, während sich seine Anzahl aktualisiert.
Spiele sie einmal pro Klick ab, ohne die ursprüngliche Produktkarte zu bewegen, und lass den Flug bei reduzierter Bewegung (prefers-reduced-motion) weg, aktualisiere den Warenkorb aber trotzdem.

Beim Ankreuzen wird im Kästchen ein Häkchen Strich für Strich gezeichnet.

Füge bei [wo] eine „Checkbox Check Draw“-Animation hinzu (auch animated checkbox oder checkmark draw genannt).
Beim Ankreuzen soll sich das Kästchen mit Farbe füllen und das Häkchen sich in einem schnellen, weichen Strich selbst zeichnen; beim Abwählen wird es auf dieselbe Weise wieder gelöscht.
Lass es eine echte Checkbox mit ihrem checked-Zustand bleiben, die mit der Tastatur funktioniert und einen sichtbaren Fokusring hat.