Back to library
INTERACTION_021

Count-Up Number.

An eased rAF loop drives the number from 0 to its target the first time it enters the viewport, with tabular figures preventing width jitter.

CATEGORY
Typography
COMPLEXITY
Easy
TECH
CSS + JS
PLATFORM
Both
PERFORMANCE
Light
LIVE PLAYGROUND
0COPY ACTIONS
JavaScript / JS
function countUp(el, target, duration = 1400) {
  const start = performance.now();
  const ease = (t) => 1 - Math.pow(1 - t, 3);
  (function tick(now) {
    const p = Math.min((now - start) / duration, 1);
    el.textContent = Math.round(target * ease(p)).toLocaleString();
    if (p < 1) requestAnimationFrame(tick);
  })(start);
}

IF YOU LIKE THIS, STEAL THESE TOO.

CHROME TEXT
INTERACTION_019CSS

Shimmer Text

A metallic highlight sweeps through the letterforms.

Typography / LightView
INTERACTION_015CSS + JS

Scroll Reveal

Content fades and rises as it enters the viewport.

Scroll / LightView
MOVEDIFFERENT.
INTERACTION_018CSS

Headline Reveal

Lines rise out of a clipped mask, one after another.

Typography / LightView
SCRAMBLE
INTERACTION_020CSS + JS

Text Scramble

Characters cycle through noise before settling.

Typography / LightView