JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.snorkl.tv/js/src/tour/greensock/TweenMax.min.js"></script>
<div class="wrapper">
    <div id="cntPiecesBg"></div>
</div>

CSS

#cntPiecesBg span{
    position:absolute;
    display: block;
    font-size: 0;
    background-color: #313435;
}


.wrapper{
    width:500px;
    height:500px;
}

JavaScript

function rand2Number() {
    return Math.round(Math.random(1));
}

//give the container for all the peices a perspective
TweenLite.set($("#cntPiecesBg"), {
    css: {
        //perspective: 500
    }
});




var rows = 5,
    columns = 5,
    cntPiecesBg = $('#cntPiecesBg'),
    wWidth = $('.wrapper').outerWidth(),
    wHeight = $('.wrapper').outerHeight(),
    objWidth = wWidth / rows,
    objHeight = wHeight / columns;

for (var i = 0; i < rows * columns; i++) {

    var topIndex = Math.floor(i / rows),
        leftIndex = i % rows;


    var obj = $('<span></span>').css({
        width: objWidth,
        height: objHeight,
        top: objHeight * topIndex,
        left: objWidth * leftIndex
    });

    cntPiecesBg.append(obj);
}

var pieces = cntPiecesBg.find('span'),
    backgroundTl = new TimelineLite(),
    nt = {
        signs: ['-=', '+=']
    };

pieces.each(function() {
    var $this = $(this);
    TweenLite.set($this, {
        css: {
            backgroundColor: Math.random() * 0xffffff,
            borderRadius: 50
        }
    });
    //see docs for TimelineLite.to() convenience method: 
    // http://api.greensock.com/js/com/greensock/TimelineLite.html#to()
    backgroundTl.to($this, 4, {
        css: {

           	//rotationY: nt.signs[rand2Number()] + 720 + "deg",
            //rotationX: Math.random() * 360,
            //z: 400,
            left: nt.signs[rand2Number()] + (Math.random() * 400) + "px",
            top: nt.signs[rand2Number()] + (Math.random() * 400) + "px"
        }
    }, 0, 0)


})


var tl = new TimelineMax({
    repeat: 5,
    yoyo: true
});

tl.timeScale(2);
tl.append(backgroundTl, .5);