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)
- element - HTML element that contains a number to be animated.This number can be an integer (i.e. 1, 42, 23...) or have any number of decimal points (i.e. 23.9, 9.042...)
- duration - total length of time of the animation in milliseconds. 10000 is the default.
- stepSize - the increment by which the numbers are increased. If the step size is 3, then the counting would look like: 3, 6, 9, 12... This feature only works if the number you are counting up to is an integer.
- startingValue - The starting number.
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);
});
});This next example is very similar to the first example, with different arguments passed into animateCountUp(), and starting each animation 500ms after the previous one by updating the setTimeout() function:
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/