Slide Out
Auch genannt Slide Out Up, Slide Out Down
Das Element gleitet über einen Containerrand hinaus und verschwindet.
Einsatz
Schließen von Drawern und Panels
Varianten
- up
- down
- left
- right
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
Füge bei [wo] eine „Slide Out“-Ausblendanimation hinzu (auch slide out up oder slide out down genannt).
Das Element soll über seinen Containerrand hinausgleiten und verschwinden und dabei voll deckend bleiben: schnell, beim Verlassen beschleunigend.
Schneide es am Containerrand ab, entziehe es Tastatur und Screenreadern, sobald es nicht mehr sichtbar ist, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.Ähnliche Animationen
A
Fade Out Directional
Auch genannt Fade Out Up, Fade Out Down
Das Element blendet aus und gleitet dabei in eine Richtung davon.
Einsatz
Benachrichtigungen und Karten verwerfen
Füge bei [wo] eine „Fade Out Directional“-Ausblendanimation hinzu (auch fade out up oder fade out down genannt).
Das Element soll ausblenden und dabei ein kurzes Stück in eine Richtung gleiten: schnell, beim Hinausgehen beschleunigend.
Nimm es erst nach dem Ausblenden aus dem Layout, damit benachbarte Inhalte nicht zu früh springen, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.A
Light Speed Out
Auch genannt Lightspeed Out
Das Element neigt sich und rast zur Seite davon, während es ausblendet.
Einsatz
Dramatisches Ausblenden
Füge bei [wo] eine „Light Speed Out“-Ausblendanimation hinzu (auch lightspeed out genannt).
Das Element soll sich neigen und beim Ausblenden zur Seite davonrasen: schnell, beim Verlassen beschleunigend.
Verhindere eine horizontale Scrollleiste, wenn es über den Rand hinausläuft, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.A
Das Element schrumpft und gleitet zu einem Rand hinaus, während es ausblendet.
Einsatz
Karten verwerfen
Füge bei [wo] eine „Back Out“-Ausblendanimation hinzu.
Das Element soll zuerst an seinem Platz leicht schrumpfen und dann zu einem Rand hinausgleiten, während es ausblendet: ein bewusster Abgang in zwei Schritten, kein einzelnes schnelles Ausblenden.
Entferne das Element erst nach dem Ende der Animation, damit das Layout nicht mitten in der Bewegung springt, und entferne es bei reduzierter Bewegung (prefers-reduced-motion) sofort.Darin scrollen
Hide on Scroll Header
Auch genannt Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation
Ein Header verschwindet beim Herunterscrollen und erscheint beim Hochscrollen wieder.
Einsatz
Navigationsleisten auf Mobilgeräten und langen Seiten
Füge bei [wo] einen „Hide on Scroll Header“ hinzu (auch headroom oder auto-hide navbar genannt).
Der Header soll nach oben aus dem Bild gleiten, wenn man nach unten scrollt, und bei jedem Hochscrollen wieder hereingleiten: schnell und weich, abhängig von der Richtung, nicht von der Distanz.
Zeig ihn ganz oben auf der Seite immer an, ignoriere winziges Scroll-Zittern und lass ihn sichtbar, solange etwas darin den Tastaturfokus hat.Mehr aus Entrance & Exit
Stagger
Auch genannt Staggered Animation, Cascade
Die Elemente einer Gruppe animieren nacheinander mit kleiner Verzögerung und bilden eine Welle, statt alle gleichzeitig zu erscheinen.
Einsatz
Listen, Raster, Navigationsmenüs und Suchergebnisse
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.A
Swirl In
Auch genannt Swirl In Forward
Das Element dreht sich und wächst aus einem Punkt heraus, während es einblendet.
Einsatz
Auftritt von Deko-Elementen oder Logos
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.ABCD
Tracking In
Auch genannt Text Tracking In, Letter-spacing In
Die Buchstaben beginnen weit gesperrt und blass und rücken beim Erscheinen auf normalen Abstand zusammen.
Einsatz
Auftritt von Überschriften
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.