JSFiddle - React, Tailwind, and code Playground

by akoptsov

HTML

<div class="ani">
    <div class="panels">One</div>
    <div class="panels">Two</div>
    <div class="panels">Three</div>
</div>

CSS

div {
 border: solid 1px;
}

.ani{
    width: 52px;
    height:206px;
}

.panels{
    position: relative;
    width:50px;
    height: 50px;
    float: left;
}

JavaScript

$(document).ready(function() {
   //interval = 2500ms + 2500ms = sum of all animation steps
   var interval = 5000;
   var looping = setInterval(startAni, interval);  
   startAni(); 
});


function startAni() {
    
    var animating = false;
    $('.ani .panels').animate({
            top: '+50px',
        }, 2500, function() {
            if(!animating){
                animating = true;
                $('.ani .panels').animate({
                    top: '0px',
                }, 2500, function(){animating=false;});
            }
        }
    );
}