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='outPut'>
    <p>Output: <span></span></p>
</div>
<!--
<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

//arrayPlay
/*
var scene = {};
    scene.sel  = ".outPut p";
    scene.animation = "fadeOut";
    scene.duration = 1000;
*/
var scene = [
    [.outPut p, fadeOut, 1000],
    ];

list = scene.slice(0);
    
$.fn[fn].apply($(el), args).promise().done(next);

    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);

$(scene.sel).scene.animation(1000);

$('.outPut span').html(scene[0]);


/*
function boxAnimate(obj) {

    var $el = $(obj.sel),
        anim;
    if (obj.secondary) {
        anim = $el.animate(obj.main.css, obj.main.dur)
                  .delay(obj.secondary.delay)
                  .animate(obj.secondary.css, obj.secondary.dur)
    } else {
        anim = $el.animate(obj.main.css, obj.main.dur)
    }
    return anim;
}
*/

/*
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...