Method animate return Scrollorama object to allow chaining animations

Updated demo code with chained animations
vbabich · Feb 22, 2013 · 44a11a9 · 44a11a9
1 parent 7ebb419
commit 44a11a9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -164,25 +164,30 @@ <h1>Credits</h1>
 			$('.char9').css('padding-left','6px');
 
 			// animate the title letters to explode
-			scrollorama.animate('#title',{ duration: 300, property:'zoom', end: 8 });
-			scrollorama.animate('#author',{ duration: 10, property:'z-index', end: 0 });
+			scrollorama
+				.animate('#title',{ duration: 300, property:'zoom', end: 8 })
+				.animate('#author',{ duration: 10, property:'z-index', end: 0 });
+
 			$('#title span').each(function() {
-				scrollorama.animate($(this),{ duration: 400, property:'top', end: Math.random()*120-180 });
-				scrollorama.animate($(this),{ duration: 300, property:'rotate', start:0, end:Math.random()*720-360 });
+				scrollorama
+					.animate($(this),{ duration: 400, property:'top', end: Math.random()*120-180 })
+					.animate($(this),{ duration: 300, property:'rotate', start:0, end:Math.random()*720-360 });
 			});
 
 			// animate some examples
-			scrollorama.animate('#unpin',{ duration:500, property:'padding-top', start:400, pin:true });
-			scrollorama.animate('#fade-in',{ delay: 400, duration: 300, property:'opacity', start:0 });
-			scrollorama.animate('#fly-in',{ delay: 400, duration: 300, property:'left', start:-1400, end:0 });
-			scrollorama.animate('#rotate-in',{ duration: 800, property:'rotate', start:720 });
-			scrollorama.animate('#zoom-in',{ delay: 200, duration: 600, property:'zoom', start:8 });
-			scrollorama.animate('#any',{ delay: 700, duration: 200, property:'opacity', start:0 });
-			scrollorama.animate('#any',{ delay: 800, duration: 200, property:'letter-spacing', start:18 });
+			scrollorama
+				.animate('#unpin',{ duration:500, property:'padding-top', start:400, pin:true })
+				.animate('#fade-in',{ delay: 400, duration: 300, property:'opacity', start:0 })
+				.animate('#fly-in',{ delay: 400, duration: 300, property:'left', start:-1400, end:0 })
+				.animate('#rotate-in',{ duration: 800, property:'rotate', start:720 })
+				.animate('#zoom-in',{ delay: 200, duration: 600, property:'zoom', start:8 })
+				.animate('#any',{ delay: 700, duration: 200, property:'opacity', start:0 })
+				.animate('#any',{ delay: 800, duration: 200, property:'letter-spacing', start:18 });
 
 			// animate the parallaxing
-			scrollorama.animate('#parallax2',{ delay: 400, duration: 600, property:'top', start:800, end:-800 });
-			scrollorama.animate('#parallax3',{ delay: 200, duration: 1200, property:'top', start:500, end:-500 });
+			scrollorama
+				.animate('#parallax2',{ delay: 400, duration: 600, property:'top', start:800, end:-800 })
+				.animate('#parallax3',{ delay: 200, duration: 1200, property:'top', start:500, end:-500 });
 
 			// animate some easing examples
 			var $easing = $('#easing'),

diff --git a/js/jquery.scrollorama.js b/js/jquery.scrollorama.js
@@ -355,6 +355,8 @@
 			}
 
 			onScrollorama();
+
+			return scrollorama;
 		};
 
 		// function for passing blockChange event callback
-Original file line number
+Diff line change
@@ Expand Up / @@ -355,6 +355,8 @@ @@
     			}
     			onScrollorama();
+    			return scrollorama;
     		};
     		// function for passing blockChange event callback
@@ Expand Down @@