JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" id='a'></div>
<div class="box" id='b'></div>

CSS

.box {
    width: 100px;
    height: 100px;
    background-color: black;
    margin-bottom: 5px;
    position: relative;
    left: 0;
}

JavaScript

var a = getEle('a'), b = getEle('b'), t = 10;

//this is example how loopevent, timer, and animate of jquery basically work.."async.."

animate(a,3000,400);
animate(b,3000,100);
//animate(element, timeInMilliSeconds, position)..

function animate(ele, time, pos) {
    var posNow, add = pos/(time/t);
    update();
    function update() {
        setTimeout(function(){
            posNow = parseFloat(getComputedStyle(ele).left);
            if (posNow < pos) {
                ele.style.left =posNow + add +'px';
                update();
            }
        },t);
    }
}

function getEle(x) {
    return document.getElementById(x);
}