Counter Up

<div class="counter-wrap">
  <span class="counter" data-target="2847">0</span>
  <span style="color:#999;font-size:13px;margin-top:2px">Active Users</span>
</div>

.counter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.counter {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1a1a1a;
}

const counter = document.querySelector('.counter');
const target = +counter.dataset.target;
const duration = 2000;
const start = performance.now();

function update(now) {
  const progress = Math.min((now - start) / duration, 1);
  const ease = 1 - Math.pow(1 - progress, 3);
  counter.textContent = Math.floor(target * ease).toLocaleString();
  if (progress < 1) requestAnimationFrame(update);
}
requestAnimationFrame(update);