Smooth Number Counter

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #050910;
  color: #f2f6ff;
}

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  place-content: center;
  gap: 1rem;
  text-align: center;
}

.hero-label {
  color: #334155;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-arrow {
  font-size: 1.5rem;
  color: #334155;
  animation: bounce 1.5s ease-in-out infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

.stats-section {
  min-height: 80vh;
  display: grid;
  place-items: center;
  padding: 4rem 2rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  max-width: 900px;
  width: 100%;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.stat-num {
  display: block;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
}

.stat-label {
  font-size: 0.875rem;
  color: #475569;
  letter-spacing: 0.02em;
}

if (window.gsap && window.ScrollTrigger) {
  gsap.registerPlugin(ScrollTrigger);

  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  document.querySelectorAll(".stat-num").forEach((el) => {
    const target = parseFloat(el.dataset.target);
    const suffix = el.dataset.suffix || "";

    if (reduced) {
      el.textContent = target.toLocaleString() + suffix;
      return;
    }

    const obj = { val: 0 };

    gsap.to(obj, {
      val: target,
      duration: 2,
      ease: "power2.out",
      onUpdate() {
        el.textContent = Math.round(obj.val).toLocaleString() + suffix;
      },
      scrollTrigger: {
        trigger: el,
        start: "top 85%",
        once: true,
      },
    });
  });
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Number Counter</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="hero">
    <p class="hero-label">Scroll down to trigger</p>
    <div class="hero-arrow">↓</div>
  </div>

  <section class="stats-section">
    <div class="stats-grid">
      <div class="stat-item">
        <span class="stat-num" data-target="98" data-suffix="%">0</span>
        <span class="stat-label">Client satisfaction</span>
      </div>
      <div class="stat-item">
        <span class="stat-num" data-target="4200000" data-suffix="">0</span>
        <span class="stat-label">Lines of code shipped</span>
      </div>
      <div class="stat-item">
        <span class="stat-num" data-target="312" data-suffix="+">0</span>
        <span class="stat-label">Projects delivered</span>
      </div>
      <div class="stat-item">
        <span class="stat-num" data-target="12" data-suffix="ms">0</span>
        <span class="stat-label">Avg response time</span>
      </div>
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Stat numbers that animate from zero to their target value as they scroll into the viewport. Uses GSAP’s ScrollTrigger for the trigger and gsap.to() with a proxy object for smooth eased interpolation.

How it works

Each counter element stores its target in a data-target attribute. GSAP animates a plain object { val: 0 } to { val: target } and updates the DOM in onUpdate:

gsap.to(obj, {
  val: target,
  duration: 2,
  ease: "power2.out",
  onUpdate: () => el.textContent = Math.round(obj.val).toLocaleString(),
  scrollTrigger: { trigger: el, start: "top 85%" }
});

Features

toLocaleString() formats large numbers with commas (1,000+)
Suffix support via data-suffix (%, K, +, ms…)
prefers-reduced-motion — skips to final value instantly