.count - number counters

.count animates the number inside an element from a start value up (or down) to the number found in its content. It is a pure counter - only textContent is touched, never opacity - so it composes cleanly with .scroll, .scroll-progress, .appear and .leave. Pair it with a spawn like .spawn-fade when you also want a fade-in.

<span class="count">1250</span>            <!-- 0 → 1250 -->
<span class="count spawn-num-100">0</span>      <!-- 100 → 0 (counts down) -->
<span class="count scroll">97531</span>        <!-- replays on every scroll enter -->

<!-- scrubbed directly by the scrollbar -->
<span class="count scroll-progress">100</span>%

Demo - the basics

Four counters that played when this page loaded: a default 0-count, a decimal target, a countdown via .spawn-num-N, and a custom start point. Reload or revisit the page to replay them.

Demo - scroll-triggered

With .scroll the count runs when the element enters the viewport and rewinds to its start value when it leaves - scroll back up over these to watch them reset and recount.

Demo - scrubbed by the scrollbar

Combined with .scroll-progress your scroll position IS the playhead: the number tracks the scrollbar exactly, up and down.

Tunables

Put .count on an element containing only the number: the tick rewrites textContent, so surrounding currency symbols or suffixes would be wiped. Commas in the source are parsed away ($1,250 counts to 1250) and decimals in the target are kept (3.14 counts to 3.14). The target is cached per element so a .scroll reverse can't collapse the range.