This jQuery plugin is great for when you want to animate a set of elements in succession, that is, not all at the same time.
Sorry, but my maths isn’t great and I’m not sure what term to use instead of
modifier for overlapping the animations. If anyone knows, please comment and I’ll sort it out.
Thank you to Alan Neville on Twitter, apparently the term I should be using instead of modifier is convolution. I will update the code accordingly!
Click here to jump straight to the minified plugin code.
Animations:
There are no default animations set, you must pass an object literal of animations and their values to the animations property.
1 2 3 4 5 |
$('.elements').sequencr({ animations:{ opacity:0 } }); |
Animation Time:
Pretty self explanatory, changing the animationTime property will change how long each animation will take, in milliseconds. The default is 1000 milliseconds (1 second).
Classes:
You can choose to have classes added to each element after the animation has finished by adding a string to the classes property.
1 2 3 |
$('.elements').sequencr({ classes:"addThisClass addThisClassToo" }); |
Delay:
The delay before any animations start, in milliseconds. Changed with the delay property. The default is 0.
Easing:
The type of easing you want to use, the default is “swing”. Can be used with easing plugins wherever you’d use easing in a standard jQuery animation.
1 2 3 |
$('.elements').sequencr({ delay:"easeInOutBounce" }); |
Convolution:
Previously called the modifier.
The default setting is to have each element animate once the previous element has finished, but you can change the convolution value, with 1 being default. Setting convolution:2 will cause the next animation to start when the previous animation is halfway complete, but you can choose any number. The higher the number, the sooner the next animation will start. Choosing convolution:0 will cause the animations to all fire at the same time.
Time Between:
You can set the time between animations by changing the timeBetween property. The default for this is 100, and the value you pass will be in milliseconds.
Example:
1 2 3 4 5 6 7 8 9 |
$('#animate span').sequencr({ //Target the span elements inside the #animate element animations : { //Choose which animations to carry out opacity : 0, //Fade out each span element top : 20 //Also make them "drop" 20 pixels, span must have CSS style "position:relative" to do this }, animationTime : 500, //Run the animation for half a second classes : "finished", //Add the "finished" class to each element after its animation timeBetween : 0 //We don't want a gap between the animations }); |
Plugin code:
Add this to your jQuery/JS file before any code that uses the plugin:
1 |
;(function(jQuery){jQuery.fn.sequencr=function(o,cb){var t=typeof o.timeBetween=='undefined'?100:o.timeBetween;var at=typeof o.animationTime=='undefined'?1000:o.animationTime;var an=typeof o.animations=='undefined'?{n:0}:o.animations;var d=typeof o.delay=='undefined'?0:o.delay;var e=typeof o.easing=='undefined'?"swing":o.easing;var c=typeof o.convolution=='undefined'?1:o.convolution;var cl=typeof o.classes=='undefined'?"":o.classes;this.delay(d);var am=this.size();var r=am*(at+t);var a=0,b=0;return this.each(function(){jQuery(this).delay(a++*(at+t)/c);r-=(at+t);jQuery(this).animate(an,at,e,function(){b++;if(typeof cb!="undefined"&&b==am)cb();$(this).addClass(cl);});jQuery(this).delay(r+t);});};})(jQuery); |