Gotta love non-self-executing functions.

+error handling +animation +works

Author: 1j01

animate-custom.css

@@ -0,0 +1,139 @@
+.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes flipInY {
+    0% {
+        -webkit-transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    } 40% {
+        -webkit-transform: perspective(400px) rotateY(-10deg);
+    }
+    
+    70% {
+        -webkit-transform: perspective(400px) rotateY(10deg);
+    }
+    
+    100% {
+        -webkit-transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+}
+@-moz-keyframes flipInY {
+    0% {
+        -moz-transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+    
+    40% {
+        -moz-transform: perspective(400px) rotateY(-10deg);
+    }
+    
+    70% {
+        -moz-transform: perspective(400px) rotateY(10deg);
+    }
+    
+    100% {
+        -moz-transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+}
+@-o-keyframes flipInY {
+    0% {
+        -o-transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+    
+    40% {
+        -o-transform: perspective(400px) rotateY(-10deg);
+    }
+    
+    70% {
+        -o-transform: perspective(400px) rotateY(10deg);
+    }
+    
+    100% {
+        -o-transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+}
+@keyframes flipInY {
+    0% {
+        transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+    
+    40% {
+        transform: perspective(400px) rotateY(-10deg);
+    }
+    
+    70% {
+        transform: perspective(400px) rotateY(10deg);
+    }
+    
+    100% {
+        transform: perspective(400px) rotateY(0deg);
+        opacity: 1;
+    }
+}
+
+.flipInY {
+	-webkit-backface-visibility: visible !important;
+	-webkit-animation-name: flipInY;
+	-moz-backface-visibility: visible !important;
+	-moz-animation-name: flipInY;
+	-o-backface-visibility: visible !important;
+	-o-animation-name: flipInY;
+	backface-visibility: visible !important;
+	animation-name: flipInY;
+}
+@-webkit-keyframes fadeInDownBig {
+	0% {
+		opacity: 0;
+		-webkit-transform: translateY(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-webkit-transform: translateY(0);
+	}
+}
+
+@-moz-keyframes fadeInDownBig {
+	0% {
+		opacity: 0;
+		-moz-transform: translateY(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-moz-transform: translateY(0);
+	}
+}
+
+@-o-keyframes fadeInDownBig {
+	0% {
+		opacity: 0;
+		-o-transform: translateY(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		-o-transform: translateY(0);
+	}
+}
+
+@keyframes fadeInDownBig {
+	0% {
+		opacity: 0;
+		transform: translateY(-2000px);
+	}
+	
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.fadeInDownBig {
+	-webkit-animation-name: fadeInDownBig;
+	-moz-animation-name: fadeInDownBig;
+	-o-animation-name: fadeInDownBig;
+	animation-name: fadeInDownBig;
+}

app.css

@@ -5,3 +5,13 @@
 	margin: 0;
 	padding: 0;
 }
+
+img.frame {
+	max-width: 64px;
+	max-height: 64px;
+	margin: 5px;
+}
+
+#error {
+	color: red;
+}

app.js

@@ -4,6 +4,7 @@ $(function(){
 	var $results = $('#results');
 	var $frames = $('#frames');
 	var $done = $('#done');
+	var $error = $('#error');
 
 	var icon;
 	(function(){
@@ -12,10 +13,10 @@ $(function(){
 		var ctx = c.getContext('2d');
 		var $link = $('<link rel="icon">').appendTo($head);
 		icon = function(f){
-			f(ctx,c,0,null,5,false,undefined,NaN,'NaNaN');
+			f(ctx,c);
 			$link.attr('href',c.toDataURL('image/png'));
 		};
-	});
+	})();
 
 	var gif;
 
@@ -48,6 +49,7 @@ $(function(){
 			gif.render();
 		}catch(e){
 			$done.addClass('failed').text('Failed');
+			$error.text(e.message);
 			console.error(e);
 		}
 	});
@@ -64,16 +66,16 @@ $(function(){
 			var dt = e.originalEvent.dataTransfer;
 			var files;
 			if(dt && (files=dt.files) && files.length){
-				console.debug("dropped files: ",files);
+				//console.debug("dropped files: ",files);
 				var i=0;
 				var next = function(){
 					var file = files[i++];
 					if(!file){return;}
-					console.debug(i,'out of',files.length,':',file);
+					//console.debug(i,'out of',files.length,':',file);
 
 					var reader = new FileReader();
 					reader.onload = function(e){
-						var $img = $('<img>').appendTo($results);
+						var $img = $('<img class="frame animated flipInY"/>').appendTo($frames);
 						$img.attr('src',reader.result);
 						$img.on('load',function(e){
 							var img = $img[0];
@@ -85,23 +87,12 @@ $(function(){
 						});
 					};
 					reader.onerror = function(e){
+						$error.text(e.message);
 						console.error(reader.result,e);
 					};
 					reader.readAsDataURL(file);
 				};
 				next();
-				/*
-				dt.files.forEach(function(i,file,files){
-					console.log(i,file,files);
-					
-					var reader = new FileReader();
-					reader.onload = function(e){
-						var $img = $('<img>').appendTo($results);
-						$img.attr('src',reader.result);
-						
-						gif.addFrame($img.get(0));
-					};
-				});*/
 			}
 		});
 });

index.html

@@ -3,14 +3,18 @@
 	<head>
 		<title>GIF Maker</title>
 		<link rel="stylesheet" type="text/css" href="app.css">
+		<link rel="stylesheet" type="text/css" href="animate-custom.css">
 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 		<script src="gif.js"></script>
 		<script src="app.js"></script>
 	</head>
 	<body>
 		Drag and drop images anywhere to add frames.
 		<section id="frames"></section>
-		<button id="done">Done</button>
+		<section id="go">
+			<button id="done">Done</button>
+			<span id="error"></span>
+		</section>
 		<section id="results"></section>
 		<footer>
 			This app uses <a href="https://github.com/jnordberg/gif.js">gif.js</a> by Johan Nordberg