JSFiddle - React, Tailwind, and code Playground

by _abl

HTML

<div id="container">
    <div id="droppableWrapper">
        <div class="droppable"></div>
        <div class="droppable"></div>
        <div class="droppable"></div>
        <div class="droppable"></div>
        <div class="droppable"></div>
    </div>
</div>

CSS

#container {
    border: 1px solid gray;
    border-top: none;
    margin: 20px 0px 0px 20px;
    height: 400px;
    position: relative;
}

#container, .droppable {
    width: 200px;
}

#droppableWrapper {
    position: absolute;
    bottom: 0px;
}

.droppable {
    margin-top: 3px;
    background-color: lightblue;
    height: 50px;
    position: relative;
    bottom: 200px;
    opacity: 0;
}

JavaScript

var stack = new Array();

$(".droppable").each(function(){
    // Note that the order of the stack 
    // is the inverse of the visual "stack" effect.
    stack.push(new Droppable($(this)));
});

startDropping();

function startDropping(){
    dropNext();
}

function dropNext(){
    var droppable = stack.pop();
    
    if(droppable){
        droppable.drop().done(dropNext);
    }
}

function Droppable(domElem) {
    function drop(){
        return domElem.animate({
            bottom :"0px",
            opacity : "1"
        },{
            duration: 600,
            specialEasing : {
                bottom : "easeOutBounce",
                opacity : "easeOutCubic"
            }
        }).promise();
    }
    this.drop = drop;
}