Animate-TweenMax

by HYEONGJINKIM

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TweenMax.min.js"></script>
<script src="http://www.greensock.com/js/1.8/jquery.gsap.min.js"></script>
<div class="grid"></div>
<span class="animate">Animate</span>
<span class="restart">restart</span>

CSS

/*Montserrat font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
body {text-align: center; overflow: hidden;}

.grid {
	width: 600px; height: 300px; margin: 100px auto 50px auto;
	perspective: 500px; /*For 3d*/
    -webkit-perspective: 500px; 
}
.grid img {width: 60px; height: 60px; display: block; float: left;}

.animate, .restart {
	font: 12px Montserrat; text-transform: uppercase;
	background: rgb(0, 100, 0); color: white;
	padding: 10px 20px; border-radius: 5px;
	cursor: pointer;
}
.animate:hover, .restart:hover {background: rgb(0, 75, 0);}

JavaScript

//Creating 50 thumbnails inside .grid
//the images are stored on the server serially. So we can use a loop to generate the HTML.
var sequencer = function() {
    var s = 0;
    return function() {
        if(s>=50){
            s = 0;
        }
        
        s++;
        
        return s; 
    }
};
var seq = sequencer();
function complete(){    
    var nSeq = seq();
    //console.log(nSeq);
    if(nSeq===50){
        //console.log('complete');
    }
}
var tl = new TimelineLite({onComplete:complete});
var images = "", count = 50;
for(var i = 1; i <= count; i++)
	images += '<img src="http://thecodeplayer.com/u/uifaces/'+i+'.jpg" />';
	
//appending the images to .grid
$(".grid").append(images);

var d = 0; //delay
var ry, tz, s; //transform params

function completeAllHandler(message) {
    console.log("complete");
}
$(".restart").on("click", function(){
    $("img").each(function(){
        var tl = new TimelineLite({onComplete:complete});
		var d = Math.random()*1000; //1ms to 1000ms delay
        
        tl.append(TweenLite.to($(this), 1, {delay:d/1000, opacity:1, scale:1, ease:Cubic.easeInOut}));
    });
});
$(".animate").on("click", function(){
    $("img").each(function(){
        var tl = new TimelineLite({onComplete:complete});
		var d = Math.random()*1000; //1ms to 1000ms delay
        
        tl.append(TweenLite.to($(this), 1, {delay:d/1000, opacity:0, scale:0, ease:Cubic.easeInOut}));
	});
    
    
    //안되는 거 
    /*var aTl = $.map( $("img"), function( val, i ) {
        var d = Math.random()*1000; //1ms to 1000ms delay
        return new TweenLite.to($(this), 1, {delay:d/1000, opacity:0, scale:0, ease:Cubic.easeInOut});
    });
    console.log(aTl);
    tl.appendMultiple(aTl);
    tl.restart();*/
    //tl.append(TweenLite.to($("img").get(0), 1, {scaleY:0}));
    //tl.append(TweenLite.to($("img").get(1), 1, {scaleY:0}));
    //tl.append(TweenLite.to($("img").get(2), 1, {scaleY:0}));     
    /*tl.appendMultiple([ 
        ...