🔢 Animated Number Counter
This is a Javascript code that can be used on any site with a Business or Commerce subscription plan.
This code will display a rolling animation of numbers counting up from 0 to your target number, 230 in the example code below.
How to use this code
This code is designed to work on any page of your site where you can add a code block.
It’s recommended that you change the value 230 in data-target="230" to the maximum value you want to display on your site.
The 2000 in the const duration = 2000 value represents that the animation can take 2000 seconds. Adjust this number as needed.
<div class="number-counter">
<h2 class="counter" data-target="230">0</h2>
<p class="counter-description">Happy Clients</p>
</div>
<style>
.number-counter {
text-align: center;
margin: 2em 0;
}
.number-counter .counter {
font-family: inherit; /* Matches your site's h2 font */
font-size: 2.5em;
margin: 0;
}
.counter-description {
font-size: 1em;
margin-top: 0.5em;
color: #555;
}
</style>
<script>
function animateCounter(counter) {
const target = +counter.getAttribute('data-target');
const duration = 2000;
const frameRate = 60;
const increment = target / (duration / (1000 / frameRate));
let current = 0;
const update = () => {
current += increment;
if (current < target) {
counter.textContent = Math.ceil(current);
requestAnimationFrame(update);
} else {
counter.textContent = target;
}
};
update();
}
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll('.counter').forEach(counter => {
animateCounter(counter);
});
});
</script>