JSFiddle - React, Tailwind, and code Playground

by dhaval_123

HTML

<div id="animation"> 
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
<div class="d-block class_1">
this div is aappear1
</div>
<div class="d-none class_5">
this div is aappear2
</div>
<div class="d-none class_7">
this div is aappear3
</div>
<div class="d-none class_15">
this div is aappear4
</div>

CSS

#animation img {
    display: none;
}
#animation img:first-child {
    display: done;
}
.d-none{
display:none
}
.d-block{
display:block;
}

JavaScript

window.onload = function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0, j = 0;
    var interval = setInterval(function () {
        //frames[i % frameCount].style.display = "none";
        //frames[++i % frameCount].style.display = "block";
        setDisplay(j);
        j++;
        if(j === 14) {
            clearInterval(interval);
            
        }
    },100); 
}

function setDisplay(j) {
document.getElementsByClassName('d-block').className = 'd-none';
   // x.classList.remove('d-block')
 document.getElementsByClassName('class_'+j).className = 'd-block';
}