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
Varianten
- expand
- contract
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 „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.Ähnliche Animationen
ABCD
Blur In
Auch genannt Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
Das Element startet stark verschwommen und wird scharf, oft während es hereingleitet oder einblendet.
Einsatz
Einblenden von Überschriften und Hero-Texten
Füge bei [wo] eine „Blur In“-Einblendanimation hinzu (auch text focus in, focus in oder blur text reveal genannt).
Der Inhalt soll stark verschwommen und transparent beginnen und dann an seinem Platz scharf werden: weich und eher langsam, ohne Bewegung.
Spiele sie nur einmal ab und zeige den Text bei reduzierter Bewegung (prefers-reduced-motion) sofort scharf an.ABCDEF
Split Text Stagger
Auch genannt Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
Eine Überschrift wird in Zeichen, Wörter oder Zeilen zerlegt, die mit kleiner Verzögerung nacheinander einlaufen.
Einsatz
Headlines und Abschnittstitel
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.ABCDEF
Mit der Maus darüberfahren
Letter Scatter
Auch genannt Explosive Letter Burst, Scatter Gather Letters
Buchstaben fliegen beim Hovern auseinander und kehren zurück oder platzen beim Erscheinen nach außen.
Einsatz
Verspielte Links
Füge bei [wo] einen „Letter Scatter“-Hover-Effekt hinzu (auch scatter gather letters oder explosive letter burst genannt).
Fährt der Zeiger über den Text, soll jeder Buchstabe ein kurzes Stück in seine eigene Richtung fliegen und sich dabei leicht drehen; verlässt der Zeiger den Text, sammeln sie sich weich wieder zum Wort.
Halte den Platz des Worts im Layout fest, während die Buchstaben sich bewegen, lass Screenreader es als ein Wort lesen und zeige denselben Effekt beim Tastaturfokus.ABCDEF
Mit der Maus darüberfahren
Variable Font Weight Animation
Auch genannt Font Weight Shift, Breathe Variable Font Animation, Font Transition on Hover
Die Buchstaben werden über die Achsen einer variablen Schrift fließend fetter oder leichter (oder ändern Breite und Neigung).
Einsatz
Interaktive Überschriften
Füge bei [wo] einen „Variable Font Weight Animation“-Hover-Effekt hinzu (auch font weight shift genannt).
Solange der Zeiger über dem Text ist, sollen die Buchstaben nacheinander in einer weichen Welle von links nach rechts fetter werden und beim Verlassen wieder dünner.
Nutze eine variable Schrift, damit sich die Stärke fließend statt sprunghaft ändert, verhindere, dass die breiter werdende Überschrift benachbarte Inhalte verschiebt, und zeige denselben Effekt beim Tastaturfokus.Mehr aus Entrance & Exit
A
Zoom In
Auch genannt Scale In, Zoom In Up, Zoom In Down
Das Element wächst aus einem kleinen, transparenten Zustand auf volle Größe und blendet dabei ein.
Einsatz
Modals, Bild-Lightboxen, Popover
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.A
Zoom Out
Auch genannt Scale Out
Das Element schrumpft und blendet aus, bis es verschwindet.
Einsatz
Schließen von Modals und Entfernen von Elementen
Füge bei [wo] eine „Zoom Out“-Ausblendanimation hinzu (auch scale out genannt).
Das Element soll zur Mitte hin schrumpfen und dabei ausblenden, bis es verschwindet: schnell, zum Ende hin beschleunigend.
Nimm es erst aus dem Layout und dem Tastaturfokus, wenn es verschwunden ist, und blende es bei reduzierter Bewegung (prefers-reduced-motion) sofort aus.A
Back In
Auch genannt Back In Up, Back In Down
Das Element startet verkleinert und versetzt, gleitet dann herein und wächst auf volle Größe.
Einsatz
Hero-Elemente und Karten
Füge bei [wo] eine „Back In“-Einblendanimation hinzu (auch back in up oder back in down genannt).
Das Element soll verkleinert und leicht transparent von jenseits eines Rands hereinkommen und erst an seinem Platz auf volle Größe wachsen: eine bewusste Bewegung in zwei Schritten, kein schnelles Aufploppen.
Spiele sie nur einmal ab und zeige das Element bei reduzierter Bewegung (prefers-reduced-motion) ohne Animation an seinem Platz an.