Animated Map Arcs

Eine rotierende 3D-Erde mit Markern oder Bögen sitzt im Layout.

Füge bei [wo] einen „3D Globe“ hinzu (auch interactive globe genannt).
Ein Globus mit einigen Markern auf der Oberfläche soll sich langsam und gleichmäßig um seine Achse drehen, die Marker drehen sich mit: ruhig und fortlaufend.
Halte ihn dekorativ mit einer Textalternative für die gezeigten Informationen, pausiere ihn außerhalb des sichtbaren Bereichs und stoppe die Drehung bei reduzierter Bewegung (prefers-reduced-motion).

Ein leuchtender Impuls wandert entlang einer Linie, die zwei Elemente verbindet.

Füge bei [wo] einen „Animated Beam“-Effekt hinzu (auch connecting beam genannt).
Ein kurzer leuchtender Impuls soll entlang der Linie wandern, die zwei Elemente verbindet, gleichmäßig von einem Ende zum anderen und dann von vorn: weich und ruhig.
Lass die Verbindungslinie selbst immer sichtbar und halte den Impuls bei reduzierter Bewegung (prefers-reduced-motion) still.

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.

Balken wachsen von der Höhe null bis zu ihren Datenwerten.

Füge bei [wo] eine „Bar Chart Grow“-Animation hinzu (auch animated bar chart oder bar chart entrance genannt).
Jeder Balken soll nacheinander in schneller Staffelung von der Grundlinie auf seinen Wert wachsen und beim Ankommen weich abbremsen.
Spiele sie einmal ab, wenn das Diagramm ins Bild kommt, und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort das fertige Diagramm.

Horizontale Balken tauschen im Zeitverlauf ihre Ränge, während sich die Werte ändern.

Füge bei [wo] ein „Bar Chart Race“ hinzu (auch racing bar chart genannt).
Horizontale Balken sollen wachsen und schrumpfen, während sich die Werte über die Zeit ändern, und bei jedem Rangwechsel weich aneinander vorbeigleiten, jeder mit seinem Label.
Bewege die Balken mit Transforms statt das Markup umzusortieren, damit Wechsel gleiten statt springen, und gib Nutzern eine Möglichkeit, es zu pausieren.

Diagrammelemente gehen fließend von alten zu neuen Werten über, wenn sich Daten ändern oder Datensätze umgeschaltet werden.

Füge bei [wo] eine „Chart Data Transition“ hinzu (auch chart update animation genannt).
Wenn sich die Daten ändern, sollen alle Balken gleichzeitig von ihrem alten zu ihrem neuen Wert gleiten, weich und ohne Eile, statt von null neu gezeichnet zu werden.
Starte jedes Update bei den aktuell angezeigten Werten, damit eine schnelle zweite Änderung nicht springt, und setze bei reduzierter Bewegung (prefers-reduced-motion) neue Werte sofort.