Count-up animation

Setting a number is instant and therefore invisible: if a dashboard figure swaps from 96,200 to 128,400 while the reader is looking somewhere else, nothing on screen ever said that it moved. A count-up interpolates the value over a few hundred milliseconds so the change has a duration, and a duration is something peripheral vision can catch. The odometer variant goes further and animates each digit column as a strip that rolls, which is what makes the effect read as a mechanism rather than as a number flickering.

The technique has two failure modes and both are about respect for the reader. The first is length: counting from zero over two seconds turns a figure someone came to read into a figure they have to wait for, so keep it under about 800ms and ease it out hard, spending most of the animation near the final value rather than near the start. The second is credibility. A count-up that runs on every page load implies news where there is none, which is why it belongs on a value that actually just changed, not on every stat in the grid.

Whatever the duration, the number must not resize the layout while it runs. That means tabular figures, so every digit occupies the same width and the column cannot wobble, and it means reserving the width of the final string rather than of the first. Under reduced motion there is nothing to negotiate: skip the interpolation and set the value, since the count was only ever a way of drawing attention to a number that is correct either way. The same goes for the frames themselves, which should come from the animation clock the rest of the interface uses rather than from a timer of the component’s own.