* Added more advanced in-slide animations

initializer.js

@@ -51,13 +51,23 @@ function createExampleData(db) {
 
 		presentation: 'welcome',
 		name: 'animations',
-		content: 'h1 Animations \n'
-			+'\n'
-			+'ul\n'
-			+'  li LiveSlide supports slide transitions by default...\n'
-			+'  li(class="show-1")\n'
-			+'    | And also in-slide animation. Just add a CSS class with the name "show-XX" to the element you want animated:-)\n',
-		animationSteps: 1
+		content: 'h1 Animations \n\
+\n\
+ul \n\
+  li LiveSlide supports slide transitions by default... \n\
+  li(class="show-1") \n\
+    | And also in-slide animation. \n\
+    ul \n\
+      li Specify the number of in-slide animations in the slide editor. \n\
+      li(class="show-2") Add the css class <b>show-[number]</b> to the elements you want to animate.  [number] specifies the animation order. \n\
+      li(class="show-3") With the property <b>anim-[number]</b> the effect can be specified. \n\
+      li(class="show-4", anim-4="rotate") <b>rotate</b> effect. \n\
+      li(class="show-5", anim-5="moveFromLeft") <b>moveFromLeft</b> is also possible. \n\
+      li(class="show-6", anim-6="moveFromRight") <b>moveFromRight</b> is also possible. \n\
+      li(class="show-7", anim-7="moveFromTop") <b>moveFromTop</b> is also possible. \n\
+      li(class="show-8", anim-8="moveFromBottom") <b>moveFromBottom</b> is also possible. \n\
+',
+		animationSteps: 8
 	};
 	db.saveDoc(slide2._id, slide2);
 

public/javascripts/presentation.js

@@ -39,9 +39,18 @@ LiveSlide.PresentationClient = {
 	showSlide: function(slide) {
 		jQuery('#slideContainer').append(jQuery('<div class="nextSlide"></div>').html(slide.content));
 
-			// Hide in-slide animation parts
+			// Set up in-slide animation
 		for (var i=1; i<=slide.animationSteps; i++) {
+			// Hide all not yet shown in-slide animations
 			jQuery('#slideContainer .nextSlide .show-'+i).addClass('inSlideAnimation').addClass('hidden');
+			jQuery('#slideContainer .show-'+i).each(function(index, element) {
+				jQuery(element).addClass('show');
+				var animationConfiguration = jQuery(element).attr('anim-'+i);
+				if (animationConfiguration === undefined) {
+					animationConfiguration = 'fade';
+				}
+				jQuery(element).addClass(animationConfiguration);
+			});
 		}
 		window.setTimeout(this._startAnimation, 1); // Hack to force a browser re-draw, so he will properly animate the property changes on nextSlide.
 		window.setTimeout(this._slideChanged, 1010);

public/stylesheets/style.css

@@ -3,6 +3,7 @@ body {
   color: #ddd;
   padding: 50px;
   font: 16px "Helvetica Nueue", Arial, sans-serif;
+  overflow:hidden;
 }
 
 a {
@@ -31,6 +32,7 @@ a {
 	width:1024px;
 	-moz-transform-origin: 0 0;
 	-webkit-transform-origin: 0 0;
+	overflow:hidden;
 }
 #slideContainer {
 	position:absolute;
@@ -53,18 +55,9 @@ a {
 	transition: all 1s ease-in-out;
 }
 
-/* Animations within a slide */
-#slideContainer .inSlideAnimation {
-	opacity:1;
-	-webkit-transition: all 1s ease-in-out;
-	-moz-transition: all 1s ease-in-out;
-	-o-transition: all 1s ease-in-out;
-	transition: all 1s ease-in-out;
-}
-#slideContainer .inSlideAnimation.hidden {
-	opacity:0;
-}
-
+/*===========================*/
+/* Slide Transitions         */
+/*===========================*/
 /* Fade in the next slide */
 #slideContainer .nextSlide {
 	opacity:0;
@@ -95,4 +88,64 @@ a {
 	-moz-transform:scale(0.5);
 	-webkit-transform:scale(0.5);
 	left:50%;
+}
+
+/*===========================*/
+/* Animations within a slide */
+/*===========================*/
+
+/* Basic Setup */
+#slideContainer .inSlideAnimation {
+	opacity:1;
+	-webkit-transition: all 1s ease-in-out;
+	-moz-transition: all 1s ease-in-out;
+	-o-transition: all 1s ease-in-out;
+	transition: all 1s ease-in-out;
+}
+#slideContainer .inSlideAnimation.hidden {
+	opacity:0;
+}
+
+/* Rotate function */
+#slideContainer .inSlideAnimation.show.rotate.hidden {
+	-webkit-transform:rotate(720deg);
+}
+#slideContainer .inSlideAnimation.show.rotate {
+	-webkit-transform:rotate(0deg);
+}
+
+/* move from left */
+#slideContainer .inSlideAnimation.show.moveFromLeft.hidden {
+	left:-400px;
+}
+#slideContainer .inSlideAnimation.show.moveFromLeft {
+	position:relative;
+	left:0px;
+}
+
+/* move from right */
+#slideContainer .inSlideAnimation.show.moveFromRight.hidden {
+	left:1024px;
+}
+#slideContainer .inSlideAnimation.show.moveFromRight {
+	position:relative;
+	left:0px;
+}
+
+/* move from top */
+#slideContainer .inSlideAnimation.show.moveFromTop.hidden {
+	top:-768px;
+}
+#slideContainer .inSlideAnimation.show.moveFromTop {
+	position:relative;
+	top:0px;
+}
+
+/* move from bottom */
+#slideContainer .inSlideAnimation.show.moveFromBottom.hidden {
+	top:768px;
+}
+#slideContainer .inSlideAnimation.show.moveFromBottom {
+	position:relative;
+	top:0px;
 }

views/slide-edit.jade

@@ -3,5 +3,6 @@ h1= slide.name
 form#slide-edit(action='/presentation/' + slide.presentation + '/slide/' + slide.name, method='POST')
   textarea(name='content')= slide.content
   br
+  | Animation Parts:
   input(type='text', name='animationSteps', value=slide.animationSteps)
   input(type='submit', value='Save')