JSFiddle - React, Tailwind, and code Playground

by sanford

HTML

<div id="capsulewrap">
    <div class="capsules">
    <div class="capsule">1</div>
    <div class="capsule">2</div>
    <div class="capsule">3</div>
    <div class="capsule">4</div>
    <div class="capsule">5</div>
    <div class="capsule">6</div>
    <div class="capsule">7</div>
    <div class="capsule">8</div>
    </div>
</div>

CSS

* { padding: 0; margin: 0; border: 0; }
#capsulewrap {
    height: 200px;
    width: 208px;
    overflow: hidden;
    position: relative;
}

.capsules {
    width: 208px;
    position: absolute;
    -webkit-transition: all 800ms ease;
}
.capsule {
    height: 50px; width: 50px;
    margin-left: 2px;
    float: left;
    background: steelblue;
    color: white;
    text-align: center;
    line-height: 50px;
}
.capsule.hide {
    display:none;
}
.capsules:first-child {
    left: 0;
}
    
.capsules:first-child + .capsules {
    left: 208px;
}
.capsules.offstage:first-child
{
    left: -208px;
    opacity: 0;
}
.capsules.offstage:first-child + .capsules {
    left: 0;
    -webkit-transition: all 800ms ease;
}
.capsules.onstage { opacity: 1; }    
.capsules.offstage { opacity: .5; }    

.capsules.offstage:first-child + .capsules .capsule {
    background: orchid;
}

JavaScript

$$('.capsules')[0].clone().inject('capsulewrap');

$$('.capsules')[0].toggleClass('onstage');
$$('.capsules')[1].toggleClass('offstage');

var restage = function(){
    Array.each([$$('.capsules.onstage')[0], $$('.capsules.offstage')[0]], function(el,idx) {
        el.toggleClass('onstage').toggleClass('offstage');
    })
};

$$('.capsules.offstage .capsule').removeClass('hide'); // reset for new work
$$('.capsules.offstage')[0].getElements('.capsule')[1].toggleClass('hide');
restage.delay(500);

(function(){
    $$('.capsules.offstage .capsule').removeClass('hide'); // reset for new work
    $$('.capsules.offstage')[0].getElements('.capsule')[4].toggleClass('hide');
    restage();
}).delay(2500);

(function(){
    $$('.capsules.offstage .capsule').removeClass('hide'); // reset for new work
    restage();
}).delay(5000);