Animated counters without JavaScript

A fair number of the counter designs here move. The number counts itself up, or the panel draws itself in, or something falls into place and settles.

None of them use a single line of JavaScript.

How that works

The counters are SVG, and SVG can carry its own stylesheet. The movement is CSS keyframes written inside the image itself, so the whole thing arrives as one file, in one request, and starts moving on its own. The browser handles it the way it handles any other CSS animation: on the compositor, without waking up a script.

The practical consequence is that an animated counter costs the same as a still one. They run between roughly 1.8 and 3.2 KB. There is no library, no second request, and nothing to block the rest of the page while it loads.

The kinds of movement

They are grouped by how they move rather than by what they look like, because that turns out to be the thing the choice actually turns on:

• Building up — the counter draws itself into existence, stroke by stroke.
• With weight — something falls in, bounces, and settles. Motion with inertia behind it.
• Futuristic, in motion — glow, scan lines, drifting fog. The showiest of the three.

There is a calm futuristic family too, for the case where that look is wanted without the movement. Fifty-eight of the designs on offer animate as this is written, which is a good deal more than anybody set out to build.

When a visitor has asked for less motion

Operating systems have a setting for reducing animation. People turn it on for motion sensitivity, for vestibular disorders, for migraines, and sometimes just because moving things on a page are exhausting. The browser passes that preference on to every page.

These counters honour it. If a visitor has asked their system to reduce motion, the animation does not run and they get a still counter with the same number on it. Checked design by design while writing this, not assumed.

It costs one line in a stylesheet to respect that, and it is the difference between a decoration and a nuisance.

A word against using them

Movement attracts the eye. That is the entire point of it, and it is also the argument for restraint.

If the counter is not what the page is about — and on most pages it is not — then a thing that moves in the corner competes with the real content for the visitor's attention, which was the point of the page. A still counter says the same number without asking for anything.

Use the animated ones where the counter is part of the character of the page: a personal site, a project page, something with a bit of showmanship to it. On a page where somebody is trying to read, pick one that holds still.