JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="block1"></div>
<div class="block2"></div>

CSS

.block1,
.block2 { 
  position: absolute;
  display: block;
  top: -100%;
  height: 100%;
  width: 100%;
  
}

.block1 {
    background: red;
}

.block2 {
    background: blue;
}

JavaScript

function block1() {
    $(".block1").animate({
        top: '100%'
    }, 6000, 'linear', function() {
        $(this).css('top', '-100%');
        block1();
    });
}

function block2() {
    $(".block2").animate({
        top: '100%'
    }, 6000, 'linear', function() {
        $(this).css('top', '-100%');
        block2();
    });

}

block1();
setTimeout(block2, 3000);