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

var myDIV = document.querySelector('div');
var translateMin = -40,
    translateMax = -60,
    scaleMin = .9,
    scaleMax = 1.1,
    rotateMin = -10,
    rotateMax = 10;
var strengthMin = 2,
    strengthMax = 4,
    pointsMin = 40,
    pointsMax = 100;
var tween = null,
    duration = .2;
var ease = RoughEase.ease.config({
    template: Power0.easeNone,
    strength: randInt(strengthMin, strengthMax),
    points: randInt(pointsMin, pointsMax),
    taper: 'none',
    randomize: true
}); //set taper to 'in' and randomize to 'false'
var tempObject = {};
tempObject.posX = tempObject.posY = -50;
tempObject.destX = randInt(translateMin, translateMax);
tempObject.destY = randInt(translateMin, translateMax);
tempObject.scale = 1;
tempObject.destScale = roundDecimal(rand(scaleMin, scaleMax), 2);
tempObject.rotation = 0;
tempObject.destRotation = randInt(rotateMin, rotateMax);
tween = new TweenMax(tempObject, duration, {
    posX: tempObject.destX,
    posY: tempObject.destY,
    scale: tempObject.destScale,
    rotation: tempObject.destRotation,
    onUpdate: onUpdate,
    onRepeat: onRepeat,
    repeat: -1,
    yoyo: true,
    ease: ease
});

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 onRepeat() {
    //ease=RoughEase.ease.config({template:Power0.easeNone,strength:randInt(strengthMin,strengthMax),points:randInt(pointsMin,pointsMax)});
    tempObject.destX = randInt(translateMin, translateMax);
    tempObject.destY = randInt(translateMin, translateMax);
    tempObject.destScale = roundDecimal(rand(scaleMin, scaleMax), 2);
    tempObject.destRotation = randInt(rotateMin, rotateMax);
    tween.updateTo({
        posX: tempObject.destX,
        posY: tempObject.destY,
        scale: tempObject.destScale,
        rotation:...