JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="slider-body">
    <div class="box"></div>
    <div class="box" data-x="15" data-y="35"></div>
    <div class="box" data-x="0" data-y="0"></div>
    <div class="box" data-x="-50" data-y="-50"></div>
    <div class="box" data-x="-70" data-y="-70"></div>
    <div class="box" data-x="150" data-y="250"></div>
    <div class="box" data-x="450" data-y="350"></div>
    <div class="box" data-x="-100" data-y="-100"></div>
</div>
<button id="click">save</button>

CSS

body {
    margin: 0;
}

* {
    box-sizing: border-box;
}

div#slider-body {
    width: 100%;
    height: 400px;
    border: 1px solid black;
    position: relative;
}

div.box {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid red;
}

div.box:nth-child(1) {
    top: 50px;
    left: 50px;
}

.active {
    animation: luka 1s forwards;
}

@keyframes luka {
    100% {
        transform: translate(100px, 100px);
    }
}

JavaScript

var x = 0;

function repeatOften() {
    x++;
    if (x < 400) {

        var a = document.querySelectorAll('.box');

        function offset(el) {
            var rect = el.getBoundingClientRect(),
                scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
                scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            return {
                top: rect.top + scrollTop,
                left: rect.left + scrollLeft,
                height: rect.height,
                width: rect.width
            }
        }

        for (var i = 0; i < a.length; i++) {
            if (a[i + 1] !== undefined) {
                a[i + 1].style.left = ((offset(a[i]).left + offset(a[i]).width) + Number(a[i + 1].dataset.x) - 1) + 'px';
                a[i + 1].style.top = ((offset(a[i]).top) + Number(a[i + 1].dataset.y) - offset(a[i + 1]).height - 1) + 'px';
            }
            var random = Math.random();
            a[0].style.transform = 'translate(' + x + 'px ,' + x + 'px)';
        }
        var toggle = 0;
        var b = document.querySelector('#click');
        b.addEventListener('click', function() {
            for (var i = 0; i < a.length; i++) {
                if (toggle === 0) {
                    a[0].classList.add('active');
                    toggle = 1;
                    return;
                } else {
                    a[0].classList.remove('active');
                    toggle = 0;
                    return
                }
            }
        })

        requestAnimationFrame(repeatOften);
    }
}
repeatOften();
/* requestAnimationFrame(repeatOften); */