JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

div.box {
    margin: 1em 0;
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
}

JavaScript

function fib(n) {

    return (n < 2 ? n : fib(n - 1) + fib(n - 2));
}

var series = [];

for (var i = 0; i < 20; i++) {
    series[i] = fib(i);
}

series = $.grep(series, function(n, i) {
    return (n > 5 && n < 600);
});

var time = 0;
$('div.box').each(function(i) {
    var box = $(this);
    box.queue('box', function(next) {
        box.delay(time).animate({
            left: series[i]
        }, 1000, next);
    });
    box.dequeue('box');

    time += 500;
});