Animated Map Arcs

A rotating 3D Earth with markers or arcs sits in the layout.

Add a "3D Globe" (also called an interactive globe) to [where].
A globe with a few markers on its surface should turn slowly and steadily around its axis, with the markers going round with it: calm and continuous.
Keep it decorative with a text alternative for the information it shows, pause it when off screen, and stop the rotation for users who prefer reduced motion.

A glowing pulse travels along a line connecting two elements.

Add an "Animated Beam" effect (also called a connecting beam) to [where].
A short glowing pulse should travel along the line that connects two elements, moving steadily from one end to the other and then starting again: smooth and calm.
Keep the connecting line itself visible at all times, and hold the pulse still for users who prefer reduced motion.

An element travels along a custom curved path and can rotate to follow it.

Add a "Motion Path" animation (also called animate along path) to [where].
A small element should travel along a custom curved route at a slow, steady pace, turning to face the direction it is moving.
Use a closed route so the loop repeats without a jump, and make the route scale with its container instead of staying at a fixed size.

Bars rise from zero height to their data values.

Add a "Bar Chart Grow" animation (also called an animated bar chart or bar chart entrance) to [where].
Each bar should rise from the baseline to its value one after another in a quick stagger, easing out smoothly as it settles.
Play it once when the chart comes into view, and show the finished chart right away to users who prefer reduced motion.

Horizontal bars swap ranks over time as values change.

Add a "Bar Chart Race" (also called a racing bar chart) to [where].
Horizontal bars should grow and shrink as values change over time and slide smoothly past each other whenever their rank changes, each keeping its label.
Move the bars with transforms instead of re-ordering the markup so swaps glide rather than jump, and give users a way to pause it.

Chart elements interpolate smoothly from old to new values when data changes or datasets toggle.

Add a "Chart Data Transition" (also called a chart update animation) to [where].
When the data changes, every bar should glide from its old value to its new one at the same time, smooth and unhurried, instead of redrawing from zero.
Start each update from the values currently on screen so a quick second change does not jump, and apply new values instantly for users who prefer reduced motion.