JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="div1" class="hide">A</div>
<div id="div2" class="hide">B</div>
<div id="div3" class="hide">C</div>

CSS

.hide {
    display:none;
}

JavaScript

var elts = [{
    elt: document.getElementById("div1")
}, {
    elt: document.getElementById("div2")
}, {
    elt: document.getElementById("div3")
}, ]
var pos = 0;
var prevElt = elts[0].elt;

function fadeIn(elt) {
    prevElt.style.display = "none";
    elt.style.opacity = 0;
    elt.style.display = "block";
    var tick = function () {
        elt.style.opacity = +elt.style.opacity + 0.01;
        if (+elt.style.opacity < 1) {
            (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 10)
        }
    };
    tick();
    var t = setTimeout(function () {
        pos++;
        var prev = pos || (pos + 1 >= elts.length) > 0 ? pos - 1 : elts.length - 1;
        prevElt = elts[prev].elt;
        fadeIn(elts[pos].elt);
        if (pos >= elts.length-1) {
            pos = -1;
        }
    }, 2000);
}
fadeIn(elts[pos].elt, elts[pos + 1].elt);