Line Drawing

Die Buchstabenumrisse werden als Linie gezeichnet, bevor die Füllung erscheint.

Füge bei [wo] einen „Stroke Text Draw“-Effekt hinzu (auch draw in text oder animated stroke text genannt).
Die Buchstabenumrisse sollen sich weich selbst zeichnen, und sobald sie vollständig sind, soll die Füllung einblenden.
Spiele ihn einmal beim Laden ab, halte das Wort als echten Text zugänglich und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort den gefüllten Text.

Beim Ankreuzen wird im Kästchen ein Häkchen Strich für Strich gezeichnet.

Füge bei [wo] eine „Checkbox Check Draw“-Animation hinzu (auch animated checkbox oder checkmark draw genannt).
Beim Ankreuzen soll sich das Kästchen mit Farbe füllen und das Häkchen sich in einem schnellen, weichen Strich selbst zeichnen; beim Abwählen wird es auf dieselbe Weise wieder gelöscht.
Lass es eine echte Checkbox mit ihrem checked-Zustand bleiben, die mit der Tastatur funktioniert und einen sichtbaren Fokusring hat.

Ein Kreis und ein Häkchen zeichnen sich selbst, um zu bestätigen, dass eine Aktion geklappt hat.

Füge bei [wo] eine „Success Checkmark“-Animation hinzu (auch animated success tick genannt).
Ein Kreis soll sich in einem weichen Strich selbst zeichnen, dann erscheint das Häkchen darin, und das ganze Zeichen ploppt sanft ein wenig auf: ruhig und selbstsicher.
Spiele sie einmal ab, wenn die Aktion gelingt, ergänze eine Textmeldung, die Screenreader vorlesen können, und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort das fertige Zeichen.

Beim Hovern wächst unter einem Link eine Unterstreichung von einer Seite oder aus der Mitte heraus.

Füge bei [wo] einen „Underline Draw“-Hover-Effekt hinzu (auch animated underline oder hover underline animation genannt).
Wenn der Zeiger über dem Link ist, soll unter dem Text eine Unterstreichung sanft von links nach rechts wachsen und beim Verlassen wieder schrumpfen: schnell und dezent.
Verhindere, dass die Unterstreichung das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Ein Element bewegt sich entlang eines eigenen gekrümmten Pfads und kann sich dabei in Laufrichtung drehen.

Füge bei [wo] eine „Motion Path“-Animation hinzu (auch animate along path genannt).
Ein kleines Element soll langsam und gleichmäßig einer eigenen gekrümmten Route folgen und sich dabei stets in Bewegungsrichtung drehen.
Nimm eine geschlossene Route, damit die Schleife ohne Sprung wiederholt, und lass die Route mit ihrem Container mitskalieren statt in fester Größe zu bleiben.

Kleine Kreise oder Icons kreisen auf runden Bahnen um einen Mittelpunkt.

Füge bei [wo] „Orbiting Circles“ hinzu (auch orbit animation oder orbiting icons genannt).
Kleine Kreise sollen langsam und gleichmäßig auf runden Ringen um ein zentrales Element kreisen, wobei sich der äußere Ring in die Gegenrichtung und langsamer dreht.
Halte die Schleife nahtlos und die kreisenden Elemente aufrecht, und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).

Eine Vektorform verwandelt sich fließend in eine andere.

Füge bei [wo] einen „Shape Morph“ hinzu (auch path morphing oder SVG morph genannt).
Eine Form soll sich fließend in eine andere verwandeln, etwa ein Fünfeck, das sich zu einem Stern einschnürt, wobei die Punkte gleichmäßig und ohne Eile an ihren Platz gleiten.
Gib beiden Formen gleich viele zueinander passende Punkte, damit der Morph sauber und ohne Flackern bleibt, und spiele ihn einmal pro Zustandswechsel ab statt in Schleife.