JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.websnap.cl/samples/scripts/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));
    }


    var rows = 10,
        columns = 10,
        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);

            backgroundTl.insertMultiple([
                TweenMax.staggerTo($this, 2, {css:{ top : nt.signs[rand2Number()] + (Math.random()*1500)+500 ,opacity:0} , ease:Power1.easeOut}),
                TweenMax.staggerTo($this,2, {css:{ left : nt.signs[rand2Number()] + (Math.random()*1500)+500 ,opacity:0}, ease:Power1.easeOut} )
            ]);
        }
    )
        
        
     var tl = new TimelineLite();
    tl.append(backgroundTl);