JSFiddle - React, Tailwind, and code Playground
by Keith Jeter
HTML
<div id="value">150</div>
JavaScript
function animateValue(obj, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 5);
obj.innerHTML = Math.floor(progress * (start - end) + end);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
const obj = document.getElementById("value");
animateValue(obj, 150, 0, 50000);