JSFiddle - React, Tailwind, and code Playground

by twinturbotom

HTML

<button id='start'>animate</button>
<button id='reset'>Reset</button>
<button id='pause'>pause</button>
<div class='boxes'>
    <div class='box box1'></div>
    <div class='box box2'></div>
    <div class='box box3'></div>
    <div class='box box4'></div>
    <div class='box box5'></div>
    <div class='box box6'></div>
</div>

CSS

.boxes{position: relative}
.box{width: 40px; height: 40px; background-color: green; position:absolute;}
.box1{left: 0px;}
.box2{left: 60px;}
.box3{left: 120px;}
.box4{left: 180px;}
.box5{left: 240px;}
.box6{left: 300px;}

JavaScript

var animations = [
    ['.box1', 'animate', { top: '100px'}, 1000],
    ['.box1', 'animate', { top:  '50px'}, 1000],
    ['.box1', 'delay', 100],
    ['.box2', 'animate', { top: '100px'}, 1000],
    ['.box2', 'delay', 100],
    ['.box3', 'animate', { top: '100px'}, 1000],
    ['.box3', 'animate', { top:  '50px'}, 1000],
    ['.box3', 'delay', 100],
    ['.box4', 'animate', { top: '100px'}, 1000],
    ['.box4', 'delay', 100],
    ['.box5', 'animate', { top: '100px'}, 1000],
    ['.box5', 'animate', { top:  '50px'}, 1000],
    ['.box5', 'delay', 100],
    ['.box6', 'animate', { top: '100px'}, 1000]
];

(function animate() {

    var list;
    var animating = false;

    function reset() {
        list = animations.slice(0);
        animating = false;
        $('.box:animated').stop(true, true);
        $('.box').css({
            top: '0px'
        });
    }

    function start() {
        animating = true;
        next();
    }

    function pause() {
        animating = false;
    }

    function next() {
        if (!animating) return;
        
        var a = list.shift();
        if (a) {
            var el = a[0];
            var fn = a[1];
            var args = a.slice(2);
            $.fn[fn].apply($(el), args).promise().done(next);
        } else {
            alert('all done!');
        }
    };

    $('#start').click(start);
    $('#reset').click(reset);
    $('#pause').click(pause);
    
    reset();
})();