Взрыв фона на временной шкале JS GreenSock GSAP

Question

Как я могу создать взрыв фона в Timeline GreenSock GSAP Javascript http://www.greensock.com/? Я искал, но я не могу найти способ. Я совершенно новичок в GSAP, и у меня есть срочный проект, и мне трудно создать этот эффект.

Вот пример эффекта, который мне нужно реализовать:

Заранее спасибо.

Answer 1

Я решил проблему. Это не идеальное решение, но оно работает для моих нужд.

JavaScript:

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

var rows = 10,
    columns = 10,
    cntPiecesBg = $('#cntPiecesBg'),
    wWidth = $('.wrapper').outerWidth(),
    wHeight = sectionHeight,
    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} )
        ]);
    }
)

CSS:

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

`