JSFiddle - React, Tailwind, and code Playground

by witq

HTML

<p id="value"></p>

JavaScript

function easyTerate(from, to, duration) {

    var easeInOutExpo = function (t, b, c, d) {
        if (t === 0) return b;
        if (t === d) return b + c;
        if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
        return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
    },
    diff = to - from,
    dur = duration || 800,
    startTime = performance.now(),
    el = document.getElementById('value');

    function frame(time) {
        var animTime = time - startTime;
        if (animTime >= duration) {
            el.innerHTML = to;
        } else {
            var val = easeInOutExpo(animTime, from, diff, dur);
            el.innerHTML = Math.round(val);
            requestAnimationFrame(frame);
        }
    }

    requestAnimationFrame(frame);

}

easyTerate(0, 15678, 3000);