Data & Numbers

Lines and dots animate between locations on a map or globe.

Add "Animated Map Arcs" (also called globe arcs) to [where].
Curved lines should draw themselves between locations on a dotted map one after another, then retract toward their destination while a soft ring pulses there: calm and steady.
Stagger the arcs so they never move in unison, keep the loop seamless, and pause it for users who prefer reduced motion.

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.

A ring or pie fills clockwise to its percentage.

Add a "Donut Chart Fill" animation (also called a pie chart sweep or animated donut chart) to [where].
Starting at the top, each segment should sweep clockwise in turn until the ring shows its share, easing out smoothly as it finishes.
Play it once when the chart comes into view, and keep the actual values available as text for screen readers.

A number counts from a start value to a target value when it becomes visible.

Add a "Number Ticker" (also called count up or an animated counter) to [where].
When the number comes into view, it should count up from zero to its target, fast at first and slowing gently as it lands.
Use fixed-width digits so nothing around it jitters, count only once, and give screen readers and users who prefer reduced motion the final value right away.

Each digit rolls vertically to the new value when a number changes.

Add an "Odometer" number animation (also called rolling numbers or slot-machine digits) to [where].
When the value changes, each digit should roll vertically to its new digit, always rolling forward, with a slight stagger across digits and a small settle at the end.
Keep every digit the same width so the number does not shift, and expose only the final value to screen readers.