Scroll-Triggered Animation

Der Fortschritt der Animation hängt direkt an der Scrollposition, sodass Vor- und Zurückscrollen sie abspielt oder zurückspult.

Füge bei [wo] eine „Scroll-Linked Animation“ hinzu (auch scroll-driven animation oder scroll scrub genannt).
Die Animation soll exakt der Scrollposition folgen: Runterscrollen spielt sie vorwärts ab, Hochscrollen spult sie sofort zurück, ohne eigenes zeitbasiertes Easing.
Lege die ganze Animation auf einen klaren Scrollbereich und zeige bei reduzierter Bewegung (prefers-reduced-motion) einen sinnvollen statischen Zustand.

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.

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.

Die Wörter eines Absatzes gehen beim Scrollen von blass zu voller Deckkraft über.

Füge bei [wo] einen „Text Reveal“-Effekt hinzu (auch scroll text reveal oder word-by-word reveal genannt).
Der Absatz soll blass beginnen, und beim Scrollen soll ein Wort nach dem anderen auf volle Stärke aufhellen, gekoppelt an die Scrollposition.
Beim Hochscrollen sollen die Wörter wieder verblassen, und der ganze Absatz soll unabhängig von der Abdunklung für Screenreader verfügbar bleiben.

Scrollen und Sprünge zu Ankern gleiten weich aus, statt abrupt zu springen.

Füge bei [wo] „Smooth Scroll“ hinzu (auch smooth scrolling oder inertia scroll genannt).
Scrollen und Sprünge zu Ankern sollen weich gleiten und sanft auslaufen statt ruckartig zu springen – leicht und direkt, nicht schwer und träge.
Erhalte natives Verhalten wie Tastatur-Scrollen, Scrollbar und Suche auf der Seite, und schalte die Glättung bei reduzierter Bewegung (prefers-reduced-motion) ab.

Karten bleiben beim Scrollen oben kleben und stapeln sich übereinander, wobei die früheren oft kleiner werden.

Füge bei [wo] „Stacking Cards“ hinzu (auch sticky stacking cards oder card stack scroll genannt).
Beim Scrollen soll jede Karte nahe am oberen Rand kleben bleiben und die nächste darüber hochgleiten, während die Karten darunter leicht schrumpfen, sodass ein ordentlicher Stapel entsteht.
Lass von jeder früheren Karte einen schmalen Rand sichtbar und gib der letzten Karte genug Platz, um ihre Position zu erreichen, bevor der Abschnitt endet.

Ein fixierter Header wird nach dem Herunterscrollen niedriger oder kleiner.

Füge bei [wo] einen „Sticky Header Shrink“ hinzu (auch shrinking header oder shrink on scroll genannt).
Der Header soll oben bleiben und, sobald ein Stück heruntergescrollt wird, weich zu einer schmaleren Leiste mit kleinerem Logo schrumpfen und oben wieder wachsen.
Sorg dafür, dass der Inhalt darunter nicht springt, während der Header seine Größe ändert.