JSFiddle - React, Tailwind, and code Playground

by oeffe

HTML

<div id="value"></div>

CSS

#value {
    font-size: 50px;
}

JavaScript

function animateValue(id, start, end, duration) {
    if (start === end) return;
    var range = end - start;
    var current = start;
    var increment = end > start? 1 : -1;
    var stepTime = Math.abs(Math.floor(duration / range));
    var obj = document.getElementById(id);
    obj.textContent = start;
    var timer = setInterval(function() {
        current += increment;
        obj.innerHTML = current;
        if (current == end) {
            clearInterval(timer);
        }
    }, stepTime);
}

animateValue("value", -100, 200, 10000);