JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<span data-countup="255"></span>

JavaScript

function countUp(elem) {
    var _this = this;
    _this.duration = 1000;
    _this.frameLength = 50;
    _this.endCount = Math.ceil(parseFloat(elem.getAttribute('data-countup')));
    _this.stepSize = parseInt(_this.endCount / 4);

    console.log(_this.stepSize);
    
    _this.currentCount = 0;

    _this.nextFrame = function () {
        if (_this.currentCount > _this.endCount) {
            console.log(1);
            _this.currentCount = _this.endCount;
        }
        elem.innerHTML = _this.currentCount;
        if (_this.currentCount < _this.endCount) {
            _this.stepSize = Math.ceil(_this.stepSize * 0.7);
            _this.frameLength = Math.floor(_this.frameLength * 1.05);
            _this.currentCount = _this.currentCount + _this.stepSize;
            setTimeout(_this.nextFrame, _this.frameLength);
        }
    }

    _this.nextFrame();

}

var counters = document.querySelectorAll('[data-countup]');
for (var i = 0; i < counters.length; i++) {
    new countUp(counters[i]);
}