JSFiddle - React, Tailwind, and code Playground

by louisremi

HTML

<script src="https://github.com/louisremi/jquery.transform.js/raw/master/jquery.transform2d.js"></script>
<div id="d2"></div>
<div id="d1"></div>

CSS

div {
    width: 30px;
    height: 30px;
    position: absolute;
    background: 
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN2wAADdsBmV8UDwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAD/SURBVEiJ7dSxSkNRDIDhL7Wzg0/g4Cx2cROL4OQjOCkO+lKig4P4CqXoJogI6uBmQXBwKLo5iHFoR6H3npYuvT+cLclPQk4iM00iIlroZ2Y3IjrYxwt6mTmYWOAfWlWCMvMXzxGxjh30cITVEmll8ZhzHGAL16XC2uLMvMMa3jPze1pxu2b8AKfTSqnYcUSsRMQFnjLzYRbiSh1n5tBok2dGneWaKYsnrrvVxUTECe4xxN7cxLjEFb5wPLdRj3/GK5Yy82Oeo97FGx4j4rAdEd3CWsvYiIiq8du4wQ82Q/nB7xiN7rMg90xmFj3coluav3gHpBE34kbciBtxZf4AUSSUqb4cpz0AAAAASUVORK5CYII=);
}
#d1 {
    background-color: #8b12c2;
}
#d2 {
    background-color: #d7d919;
}

JavaScript

var $body = $(document.body).queue(function() {
    $("#d1")
        .animate({transform: "translate(100px)"}, 1E3)
        .animate({transform: "translate(100px) rotate(45deg)"}, 1E3, function() {
            $body.dequeue();
        });
}).queue(function() {
    $("#d2")
        .animate({transform: "rotate(45deg)"}, 1E3)
        .animate({transform: "rotate(45deg) translate(100px)"}, 1E3, function() {
            $body.dequeue();
        });
});