Kiefer Likens
Workshop

009 — NOTE

The strongest proof on the page renders as zero

Open

Motion · Progressive enhancement · Evidence

A count-up statistics band is a decoration wrapped around the most load-bearing content on the page.

5,590 families served. 5,421 orders shipped. Fifty states. Those three numbers are the single most persuasive thing on that homepage, and in the server-rendered HTML all three of them are the digit zero.

The animation is fine. The problem is that the animation owns the value. The initial state was authored as the animation’s starting point rather than as the content, so anyone arriving without JavaScript — or any crawler that reads the markup and moves on — gets a row of zeros where the evidence should be.

There is a general rule underneath this. An effect should never be the source of truth for the thing it is decorating. Render the real number, then animate from a copy. It costs nothing and it means the page is still correct when the effect does not run.