JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.js"></script>
<div class="table">
    <div class="plate" id="p0"></div>
    <div class="plate" id="p1"></div>
    <div class="plate" id="p2"></div>
    <div class="plate" id="p3"></div>
    <div class="plate" id="p4"></div>
    <div class="plate" id="p5"></div>
    <div class="plate" id="p6"></div>
    <div class="plate" id="p7"></div>
</div>

CSS

.table {
    width: 600px;
    height: 300px;
    border: 1px solid black;
    position:relative;
    overflow:hidden;
}
.plate {
    position: absolute;
    width:100px;
    height:100px;
    border-radius: 50%;
    border: 1px solid red;
    display: none;
}
#p0 {
    top: 100px;
    left: -30px;
}
#p1 {
    top: -30px;
    left: 75px;
}
#p2 {
    top: -30px;
    left: 250px;
}
#p3 {
    top: -30px;
    left: 425px;
}
#p4 {
    top: 100px;
    right: -30px;
}
#p5 {
    bottom: -30px;
    left: 75px;
}
#p6 {
    bottom: -30px;
    left: 250px;
}
#p7 {
    bottom: -30px;
    left: 425px;
}

JavaScript

var $plates = $('.plate');

stagger(shuffle($plates), 150, animate);



function shuffle(array) {
    var currentIndex = array.length,
        temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }

    return array;
}


function animate(el) {
    var $el = $(el);

    switch (el.id) {
        case 'p0':
            $(el).velocity("transition.slideLeftIn");
            break;
        case 'p1':
        case 'p2':
        case 'p3':
            $(el).velocity("transition.slideDownIn");
            break;
        case 'p4':
            $(el).velocity("transition.slideRightIn");
            break;
        case 'p5':
        case 'p6':
        case 'p7':
            $(el).velocity("transition.slideUpIn");
            break;

    };
    
}


function stagger(targets, interval, action) {
    for (var i = 0, maxi = targets.length; i < maxi; i++) {
        (function () {
            var target = targets[i];
            setTimeout(function () {
                action(target);
            }, interval * i);
        })();
    }
}