JavaScript Count-up Animation 🔢 🚀

A JavaScript function to display incrementing numbers. See a live website with this function and complete documentation here.

animateCountUp(element, duration, stepSize, startingValue)

Using animateCountUp()

First, import the module:

JavaScript

 import animateCountUp from "./dist/index.js";

Then call the function by targeting an HTML element:

HTML

<h1>JavaScript Count-up Animation...<span id="one-hundred"> 100</span></h1>

JavaScript

// count to 100 on page load
document.addEventListener("DOMContentLoaded", () => {
    const countToOneHundred = document.getElementById("one-hundred");
    animateCountUp(countToOneHundred, 5000, null, null, null);
});

More examples...

You can also use animateCountUp() with multiple numbers within a container element. For this example, we will use a container <div> and run the animation on each number within that container that has the .countup class. Note that you can have other elements with other classnames that won't interfere with the functionality, so we have added additional <span> tags that contain .before-number and .after-number classes. This is to show that we can have other characters such as dollar signs or any other type of text that you don't want to count up:

HTML

<div id="container">
  <ul>
    <li>
      <span class="before-number">$</span>
      <span class="countup">45.23</span>
      <span class="after-number">+</span>
    </li>
    <li>
      <span class="countup">91.123</span>
      <span class="after-number">%</span>
    </li>
    <li>
      <span class="before-number">₣</span>
      <span class="countup">42</span>
      <span class="after-number">!</span>
    </li>
  </ul>
</div>

<div>
    <button id="animateButton">Animate</button>
</div>

JavaScript

 document
.getElementById("animateButton")
.addEventListener("click", () => {
  animateButton.disabled = true;
  const container = document.querySelector("#container");
  const countupEls = container.querySelectorAll(".countup");
  const totalElements = countupEls.length;
  let completedAnimations = 0;

  countupEls.forEach((el, index) => {
    setTimeout(() => {
      animateCountUp(el, 7000, 7, null, () => {
        completedAnimations++;

        // Check if all animations are completed
        if (completedAnimations === totalElements) {
            console.log("Animation finished!");
            animateButton.disabled = false;
        }
      });
    }, index * 700);
  });
});

HTML

<div id="container-two" class="example-two">
  <div class="card">
    <span class="before-number">$</span>
    <span id="countupTwo" class="countup">200</span>
    <span class="after-number">+</span>
  </div>
  <div class="card">
    <span id="countupThree" class="countup">18.76</span>
    <span class="after-number">%</span>
  </div>
  <div class="card">
    <span class="before-number">😎</span>
    <span id="countupFour" class="countup">185.32</span>
    <span class="after-number">!</span>
  </div>
</div>

<button id="animateButtonTwo">Animate</button>

JavaScript

 document
.getElementById("animateButtonTwo")
.addEventListener("click", () => {
  animateButtonTwo.disabled = true;
  const container = document.querySelector("#container-two");
  const countupEls = container.querySelectorAll(".countup");
  const totalElements = countupEls.length;
  let completedAnimations = 0;
          
  countupEls.forEach((el, index) => {
    setTimeout(() => {
      animateCountUp(el, 3500, 1, 0, () => {
        completedAnimations++;
        if (completedAnimations === totalElements) {
          animateButtonTwo.disabled = false;
        }
      });
    }, index * 500);
  });
});

On Scroll

This function can also be triggered on scroll using JavaScript's Intersection Observer API:

HTML

<div id="container-three">
    <h2>This example is triggered on scroll</h2>
    <ul>
      <li>
        <span class="before-number">$</span>
        <span id="countupTwo" class="countup">200</span>
        <span class="after-number">+</span>
      </li>
      <li>
        <span id="countupThree" class="countup">304.7</span>
        <span class="after-number">%</span>
      </li>
      <li>
        <span class="before-number">+</span>
        <span id="countupFour" class="countup">430.32</span>
        <span class="after-number">!</span>
      </li>
    </ul>
  </div>

JavaScript

const containerObserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const countupEls = entry.target.querySelectorAll(".countup");
        countupEls.forEach((el, index) => {
          setTimeout(() => {
            animateCountUp(el, 4000, 1, 0);
          }, index * 700);
        });
  
        containerThreeObserver.unobserve(entry.target);
      }
    });
  });
  
  // Observe the container div
  containerObserver.observe(
    document.getElementById("container-three")
  );

Live site with examples and documentation: https://jon424.github.io/javascript-countup-animation/