Slide In
Auch genannt Slide In Up, Slide In Down, Slide In Left, Slide In Right
Das Element gleitet von jenseits des Containerrands an seine Ruheposition, ohne einzublenden.
Einsatz
Drawer, Seitenpanels, Banner
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 In“-Einblendanimation hinzu (auch slide in left, slide in right, slide in up oder slide in down genannt).
Das Element soll von jenseits des Containerrands an seinen Platz gleiten und dabei die ganze Zeit voll deckend bleiben: schnell, sanft abbremsend, ohne Nachfedern.
Schneide es am Containerrand ab, damit es Nachbarelemente nicht überlappt und keine Scrollleisten erzeugt, solange es draußen ist, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) direkt an seinem Platz an.Ähnliche Animationen
A
Fade In Directional
Auch genannt Fade In Down, Fade In Left, Fade In Right
Das Element blendet ein und gleitet dabei ein kurzes Stück von einer Seite an seine endgültige Position.
Einsatz
Abschnitte und Karten, die beim Laden oder Scrollen erscheinen
Füge bei [wo] eine „Fade In Directional“-Einblendanimation hinzu (auch fade in left, fade in right oder fade in down genannt).
Das Element soll einblenden und dabei ein kurzes Stück von einer Seite an seine endgültige Position gleiten: schnell und fließend, beim Ankommen abbremsend, ohne Nachfedern.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.Fade Up
Auch genannt Fade In Up, Reveal on Scroll
Das Element gleitet ein kurzes Stück nach oben und blendet dabei ein, als würde es an seinen Platz rücken.
Einsatz
Abschnittsüberschriften, Karten und Bilder, die beim Scrollen erscheinen
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.A
Light Speed In
Auch genannt Lightspeed In
Das Element schießt schräg geneigt von der Seite herein und richtet sich beim Ankommen gerade auf.
Einsatz
Dramatischer Auftritt für Banner oder Überschriften
Füge bei [wo] eine „Light Speed In“-Einblendanimation hinzu (auch lightspeed in genannt).
Das Element soll schnell von der Seite hereinschießen, schräg geneigt wie in voller Fahrt, die Neigung einmal überkorrigieren und sich beim Ankommen gerade aufrichten: schnell und dramatisch, zum Ende hin abbremsend.
Verhindere eine horizontale Scrollleiste, solange es noch außerhalb des Bildschirms ist, und zeige es bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.A
Drawer Slide
Auch genannt Off-canvas, Side sheet, Slide-over, Navigation drawer
Ein Seitenpanel gleitet vom linken, rechten oder oberen Rand herein und schiebt oder überdeckt den Inhalt.
Einsatz
Mobile Navigation, Einstellungs-Panels, Warenkörbe
Füge bei [wo] einen „Drawer Slide“ hinzu (auch off-canvas oder side sheet genannt).
Das Panel soll vom seitlichen Rand über den Inhalt hereingleiten, während die Seite dahinter abdunkelt, schnell und weich abbremsend, und beim Schließen auf demselben Weg wieder hinausgleiten.
Halte den Tastaturfokus im offenen Drawer, schließ ihn mit Escape oder einem Klick auf den abgedunkelten Bereich und gib den Fokus an den Button zurück, der ihn geöffnet hat.Mehr aus Entrance & Exit
A
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
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.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.