JSFiddle - React, Tailwind, and code Playground
HTML
<div class="anim"></div>
CSS
.anim{
font-family: monospace, monospace;
text-transform: uppercase;
font-weight: bold;
font-size: 3rem;
}
.number{
color:red;
}
.prenumber, .postnumber{
color: black;
}
JavaScript
var targets = [
['pr','digies',50,0,1,100],
['',' All-stars',50,50,1,100],
['','% Max',1,100,0,2000],
['EV','LVED',1,0,0,5000]
];
var interval;
var item; //current targets array item in use
var counter; //normal counter
var increment; //increment by
var limit; //counter limit - once counter hits this - go to next
var intervalID;
var cycle = true; //loop "animation" false = stay on last targets item ad stop animation
function init()
{
$('.anim').html('<span class="prenumber"></span><span class="number"></span><span class="postnumber"></span>');
item = 0;
next(item);
}
function next()
{
if(item == targets.length)
{
if(cycle == true)
{
item = 0;
}else{
stopTime();
return;
}
}
$('.anim .prenumber').html(targets[item][0]);
$('.anim .postnumber').html(targets[item][1]);
$('.anim .number').html(targets[item][3]);
increment = targets[item][4];
interval = targets[item][5];
limit = targets[item][2];
counter = 0;
if(intervalID) stopTime();
intervalID = window.setInterval(countUp, interval);
console.log('NEXT interval ' + interval);
}
function countUp()
{
counter++;
var current = parseInt($('.anim .number').html()) + increment;
$('.anim .number').html(current);
if(counter > limit)
{
item++;
next();
}
}
function stopTime()
{
clearInterval(intervalID);
}
init();