diff --git a/index.html b/index.html
index 857512c..cf3c830 100644
--- a/index.html
+++ b/index.html
@@ -84,6 +84,7 @@
 		socket.on('init', function (msg) {
 			$('#presets').empty();
 			$('#sliders').empty();
+			$('#anim').empty();
 			setup = msg.setup
 			devices = msg.devices
 
@@ -101,7 +102,6 @@
 						socket.emit('update', universe, values[universe]);
 					}
 				};}(setup.presets[preset].values));
-				console.log(html);
 			}
 			
 			/* blackout button */
@@ -145,6 +145,26 @@
 				html += "</div>";
 				$(html).hide().appendTo('#sliders').fadeIn();
 			}
+
+			/* animations */
+			for(var animation in setup.animPresets) {
+				var html = '<button class="span2 btn btn-info">' + setup.animPresets[animation].label + '</button>';
+				var e = $(html)
+				e.hide().appendTo('#anim').fadeIn();
+				e.click(function(values) { return function() {
+					for(var universe in values) {
+						$.ajax({
+							type: 'POST',
+							contentType: 'application/json',
+							data: JSON.stringify(values[universe]),
+							url: '/animation/'+universe,
+							processData: false,
+							dataType: 'json'
+						});
+					}
+				};}(setup.animPresets[animation].anim));
+			}
+
 			$("input").live("change", function(e) {
 				var i = e.target.id.split('_');
 				if(i[0] === 'picker') {
@@ -205,6 +225,7 @@
 	<ul class="nav" id="myTab">
 	  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 	  <li><a href="#sliders" data-toggle="tab">Sliders</a></li>
+	  <li><a href="#anim" data-toggle="tab">Animations</a></li>
 	  <!--<li><a href="#scripts" data-toggle="tab">Scripts</a></li>-->
 	</ul>
 	</div>
@@ -218,6 +239,9 @@
 </div>
 <div id="sliders" class="tab-pane">
 
+</div>
+<div id="anim"    class="tab-pane">
+
 </div>
 <div id="scripts"    class="tab-pane">