JSFiddle - React, Tailwind, and code Playground
HTML
<h1 class="counter" data-count="22200">0</h1>
JavaScript
$('.counter').each(function () {
var $this = $(this),
countTo = $this.attr('data-count');
var animation = {
countNum: countTo
};
$({ countNum: $this.text() }).animate(animation, {
duration: 8000,
step: function (now, fx) {
$this.text(Math.floor(this.countNum));
if (fx.pos > 0.5) {
$(this).stop();
$(this).animate(animation, {
duration: 8000,
step: function () {
$this.text(Math.floor(this.countNum));
},
complete: function () {
$this.text(this.countNum);
}
});
}
}
});
});