JSFiddle - React, Tailwind, and code Playground

by witq

HTML

<p>t: current time, b: begInnIng value, c: change In value, d: duration</p>
<p id="counter"></p>
<p id="delay"></p>

JavaScript

$(document).ready(function(){
    el = $('#counter'),
    i = 0,
    easeInOutQuart = function (t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    easeOutCubic = function (t, b, c, d) {
        return c*((t=t/d-1)*t*t + 1) + b;
    };
    function loop(delay) {
        el.text(i);
        setTimeout(function() {
            d = (100 - i).toFixed(0);
            i+=d/2;
            delay=easeOutCubic(i,0,200,100).toFixed(0);
            $('#delay').text(delay);
            if (i <= 100) {
                loop(delay);
            }
            o = i;
        }, delay);
    };       
    loop(0);
});