Browse files

Method animate return Scrollorama object to allow chaining animations

Updated demo code with chained animations
  • Loading branch information...
1 parent 7ebb419 commit 44a11a9ddf049056baee905eec68f1525b6e88c5 @nicooprat nicooprat committed Feb 22, 2013
Showing with 20 additions and 13 deletions.
  1. +18 −13 index.html
  2. +2 −0 js/jquery.scrollorama.js
View
31 index.html
@@ -164,25 +164,30 @@ <h2 id="easing">Easing</h2>
$('.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'),
View
2 js/jquery.scrollorama.js
@@ -355,6 +355,8 @@
}
onScrollorama();
+
+ return scrollorama;
};
// function for passing blockChange event callback

0 comments on commit 44a11a9

Please sign in to comment.