JSFiddle - React, Tailwind, and code Playground
HTML
<div data-value="69"></div>
<div data-value="187"></div>
<div data-value="666"></div>
CSS
[data-value] {
font: bold 64px monospace;
color: red;
}
JavaScript
function animateValue(elem) {
return new Promise(resolve => {
const endValue = +elem.dataset.value;
let currValue = 0;
const interval = setInterval(() => {
if (++currValue === endValue) {
clearInterval(interval);
resolve();
}
elem.innerText = currValue;
}, 20);
});
}
Array
.from(document.querySelectorAll('[data-value]'))
.reduce((p, c) => p.then(() => animateValue(c)), Promise.resolve());