Animate-GASP BOX

by HYEONGJINKIM

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TweenMax.min.js"></script>
<div id="content">
<div id="boxes" class="boxes">
<div id="box1" class="box">box1</div>
<div id="box2" class="box">box2</div>
<div id="box3" class="box">box3</div>
</div>
<div id="boxes" class="boxes">
<div id="box4" class="box">box4</div>
<div id="box5" class="box">box5</div>
<div id="box6" class="box">box6</div>
</div>
<div id="boxes" class="boxes">
<div id="box7" class="box">box7</div>
<div id="box8" class="box">box8</div>
<div id="box9" class="box">box9</div>
</div>
</div>

CSS

body{
  background-color:black;
}
.boxes {  
  margin-left: auto ;
  margin-right: auto ;
  width: 430px;
  vertical-align: middle;
}

#boxes div{
position:relative;
display:inline-block;
margin:20px;
width:100px;
height:100px;
color:black;
font-size:30px;
line-height:100px;
text-align:center;
font-family: sans-serif;
background: #9af600; /* Old browsers */
background: -moz-linear-gradient(top,  #9af600 0%, #a0fd00 50%, #90e700 51%, #a0fe00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9af600), color-stop(50%,#a0fd00), color-stop(51%,#90e700), color-stop(100%,#a0fe00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #9af600 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #9af600 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #9af600 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* IE10+ */
background: linear-gradient(to bottom,  #9af600 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9af600', endColorstr='#a0fe00',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow:  0px 0px 10px 2px #a1ff00;
        box-shadow:  0px 0px 10px 2px #a1ff00;  
}

JavaScript

var box1Timeline = new TimelineLite();
var box5 = $('#box5').position();
var content = $("#content");
var boxes = $(".boxes");
function completeAllHandler(message) {
    console.log("complete");	
    TweenMax.staggerTo($('.box'), 1,  {scale:1.2, webkitFilter:"blur(2px)", ease:Elastic.easeOut}, 0.2);
    //TweenMax.set($('.box'), {webkitFilter:"blur(2px)"});
}
// 이미지가 로딩된 박스마다 올려주는 것도 나쁘지 않을듯..
//css
//TweenMax.staggerFrom($('.box'), 1,  {css:{scale:0.2, opacity:0, left:box5.left, top:box5.top, rotation:"360deg"}}, 0.3);

//css3
TweenMax.staggerFrom($('.box'), 1,  {left:box5.left, top:box5.top, scale:0.2, opacity:0, rotation:'540deg', ease:Cubic.easeInOut}, 0.2, completeAllHandler);

//TweenMax.staggerFrom($('.box'), 1,  {css:{scale:0.2, opacity:0.3}}, 1);
//TweenMax.staggerFrom($('.box'), 1,  {css:{scale:0.2, opacity:0.3}}, 1);
//box1Timeline.from("#box1", 1, {css:{opacity:0, left:box5.left, top:box5.top, rotation:"360deg"}});
//box1Timeline.to("#box1", 1, {rotation:360}).to("#box1", 1, {opacity:0});
/*var box1Timeline = new TimelineLite();
box1Timeline.to("#box1", 1, {rotation:360})
.to("#box1", 1, {opacity:0})

var box2Timeline = new TimelineLite();
box2Timeline.to("#box2", 1, {top:100})
.to("#box2", 1, {opacity:0})

var box3Timeline = new TimelineLite();
box3Timeline.to("#box3", 1, {rotation:-360})
.to("#box3", 1, {opacity:0})*/


//var masterTimeline = new TimelineLite();
//TweenMax.staggerTo([red, yellow, green, blue, pink, purple], 1,  {css:{scale:0.2, opacity:0.3}}, 5);

/*masterTimeline.add(box1Timeline)
.add(box2Timeline, 0.5)
.add(box3Timeline, 1);*/