JSFiddle - React, Tailwind, and code Playground

by javadoug

HTML

<button ref="one">One</button>
<button ref="two">Two</button>
<button ref="three">Three</button>
<button ref="four">Four</button>
<div id="viewport">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
</div>

CSS

button { display: block; }
div { position: absolute; width: 100px; height: 120px; background: red }
#viewport { position: absolute; top: 10px; left: 70px; height: 120px; }
#viewport div { top: -120px; background: green; }

JavaScript

function animate (next) {
    var curr = $('[current]');
    next.css('top', '-120px');
    if (curr.length) {
        next = $(next).add(curr);
    }
    next.animate({'top':'+=120px'}, 1500).promise().done(function(){
        curr.removeAttr('current');
        next.attr('current', 'true');
    });
}    

$('button').on('click', function () {
    var id = $(this).attr('ref');
    var next = $('#' + id);
    $(':animated').promise().done(function(){
        animate(next);
    });
});