Data-viz / scrollytelling · 12.4
Odometer rolling-digit counter
A car odometer, or a split-flap board.
A number transitioning by rolling fixed-width digit columns, so the row never resizes.
4 knobs
How it actually works
This is the most accessibility-mature technique in the entire index, and the only one in 171 entries whose source thought harder about reduced motion than we did. Its guidance is now House Standard: under reduced motion, SNAP to the new value while preserving the fixed digit slots and a visible change state. Do not merely freeze. Reduced motion means less motion, not no feedback.
A vertical strip of digits per column, moved with translateY. font-variant-numeric: tabular-nums keeps digit widths equal, each column reserves the width of the widest numeral, and the wrapper reserves the total footprint. So changing values cannot reflow the row. That last sentence is the entire reason to build it this way instead of writing to textContent.
The knobs, named
Roll duration, per-column stagger, easing, digit height. All four are ours: the sources are snippets.
| Knob | Source | What it teaches |
|---|---|---|
| Roll duration | ours | How long a column takes to land. |
| Per-column stagger | ours | Delay per digit. Left-to-right stagger is what makes it read as mechanical rather than digital. |
| Easing | ours | back-out overshoots and settles, which is what a real mechanical drum does. |
| Digit slots | ours | How many columns are reserved. Watch the layout NOT move when the value changes width. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
INFERRED
animationpatterns.art "Number Counter Odometer Transition"; GSAP forum #42433. Snippets only, so all four knobs are marked ours. The a11y guidance, unusually, IS sourced and is quoted in the index.
- Seen on
- animationpatterns.art; GSAP forum.
- Dependencies
- vanilla-possible: CSS transforms + tabular-nums
- Difficulty
- trivial (GSAP count-up) to moderate (true per-digit rolling strips)
- Performance
- Transform only. One strip per column.
- Accessibility and the floor
- Sourced, and the best in the index: use tabular numbers; announce the final value ONCE, because screen readers must not hear every intermediate digit (aria-live on a container that updates only at completion, intermediate digits aria-hidden). And under reduced motion, snap to the new number while preserving the fixed slots and a visible change state, rather than freezing.
Notes
Composability. Pair it with the funnel (12.2) inside a pinned composition (1.15) and you have the whole data-viz category in one section.