Stagger

Eine Überschrift wird in Zeichen, Wörter oder Zeilen zerlegt, die mit kleiner Verzögerung nacheinander einlaufen.

Füge bei [wo] einen „Split Text Stagger“-Einstieg hinzu (auch letter stagger oder staggered text reveal genannt).
Zerlege die Überschrift in Buchstaben, die mit kurzer Verzögerung nacheinander nach oben gleiten und einblenden, schnell und weich, ohne Nachfedern.
Spiele ihn einmal ab, wenn die Überschrift ins Bild kommt, sorge dafür, dass Screenreader sie als ein Wort lesen, und zeige sie bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation.

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.

Das Element gleitet ein kurzes Stück nach oben und blendet dabei ein, als würde es an seinen Platz rücken.

Füge bei [wo] eine „Fade Up“-Einblendanimation hinzu (auch fade-in-up oder reveal on scroll genannt).
Die Elemente sollen beim ersten Hineinscrollen leicht nach oben gleiten und dabei einblenden: dezent und schnell, ohne Nachfedern.
Spiele sie nur einmal ab und zeige die Elemente bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an.

Eine Animation spielt einmal ab, wenn ein Element in den Viewport eintritt oder ihn verlässt.

Füge bei [wo] eine „Scroll-Triggered Animation“ hinzu (auch reveal on scroll oder animate on scroll genannt).
Jedes Element soll beim Hineinscrollen einmal einblenden und nach oben an seinen Platz gleiten, in eigenem schnellem, weichem Tempo statt der Scrollposition zu folgen.
Lass den Inhalt sichtbar, falls Skripte nicht laden, und zeige die Elemente bei reduzierter Bewegung (prefers-reduced-motion) sofort an.

Das Element dreht sich und wächst aus einem Punkt heraus, während es einblendet.

Füge bei [wo] eine „Swirl In“-Einblendanimation hinzu (auch swirl in forward genannt).
Das Element soll sich deutlich mehr als eine ganze Umdrehung drehen, dabei aus einem einzigen Punkt auf volle Größe wachsen und einblenden: anfangs schnell, beim Ankommen langsamer werdend.
Spiele sie nur einmal und nur für ein einzelnes Element statt für eine ganze Gruppe ab, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.

Die Buchstaben beginnen weit gesperrt und blass und rücken beim Erscheinen auf normalen Abstand zusammen.

Füge bei [wo] eine „Tracking In“-Textanimation hinzu (auch text tracking in oder letter-spacing in genannt).
Die Buchstaben sollen weit gesperrt und blass beginnen und dann auf normalen Abstand zusammenrücken, während sie voll sichtbar werden: weich, zum Ende hin abbremsend.
Halte den Text während der Abstandsänderung zentriert und einzeilig, damit sich das umgebende Layout nicht verschiebt, und zeige ihn bei reduzierter Bewegung (prefers-reduced-motion) mit normalem Abstand an.

Das Element wächst aus einem kleinen, transparenten Zustand auf volle Größe und blendet dabei ein.

Füge bei [wo] eine „Zoom In“-Einblendanimation hinzu (auch scale in genannt).
Das Element soll von klein und transparent auf volle Größe wachsen und dabei einblenden: schnell und weich, ohne Überschwingen.
Skaliere es von der Mitte aus, ohne das umgebende Layout zu beeinflussen, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.