JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<div>&nbsp;</div>

CSS

div {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background:#f00;
    width:80px;
    height:80px;
}

JavaScript

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

var myDIV = document.querySelector('div');
var interval = 2,
    iterator = 0;
var translateMin = -48,
    translateMax = -52,
    scaleMin = 0.98,
    scaleMax = 1.02,
    rotateMin = -4,
    rotateMax = 4;

function rand(min, max) {
    return min + (Math.random() * (max - min));
};

function roundDecimal(value, place) {
    return Math.round(value * Math.pow(10, place)) / Math.pow(10, place);
};

function randInt(min, max) {
    return Math.floor(Math.random() * (1 + max - min) + min);
};

function render() {
    iterator+=1;
    requestAnimFrame(render);
    if (iterator > interval) {
        myDIV.style.transform = 'translate(' + randInt(translateMin, translateMax) + '%,' + randInt(translateMin, translateMax) + '%) scale(' + roundDecimal(rand(scaleMin, scaleMax), 2) + ') rotate(' + randInt(rotateMin, rotateMax) + 'deg)';
        iterator=0;
    }
}
requestAnimFrame(render);