An animated number counter that dynamically changes and increments or decrements a numerical value with smooth transitions.
<div class="c-number-counter">
<div class="c-number-counter__content">
50
</div>
</div>
.c-number-counter__content {
font-size: 50px;
font-weight: bold;
}
.c-number-counter {
&__content {
font-size: 50px;
font-weight: bold;
}
}
const counterContent = document.querySelector('.c-number-counter__content');
const convertedNumber = parseInt(counterContent.innerText); // Convert string to number
const countUp = (start, end, duration, element) => {
let count = start;
let interval = setInterval(function() {
element.innerText = count++;
if (count > end) {
clearInterval(interval);
}
}, duration);
}
countUp(0, convertedNumber, 30, counterContent);