Staggering animations with TweenLite

[button url=”http://codepen.io/bassta/pen/qykcu” type=”square” icon=”link” target=”_blank”] FORK AT CODEPEN [/button]

Wait, wasn’t there TweenMax staggerTo method? Yes, there is. I use staggered animations in a lot of my projects, but I also like to keep my javascript files as light as possible. So, for one my latest projects I needed to stagger animations, and also to have proper event handling system, but keep all as light as possible ( without including TweenMax ). So I end up digging into TweenMax code, and created this little snippet ( basically, just took the TweenMax code and modified it a bit, so it can be used standalone ) ;

var TM = {};

 TM.staggerTo = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
 stagger = stagger || 0;
 var delay = vars.delay || 0,
 a = [],
 finalComplete = function() {
 if (vars.onComplete) {
 vars.onComplete.apply(vars.onCompleteScope || this, arguments);
 }
 onCompleteAll.apply(onCompleteAllScope || this, onCompleteAllParams || []);
 },
 l, copy, i, p;
 if (!$.isArray(targets)) {
 if (typeof(targets) === "string") {
 targets = TweenLite.selector(targets) || targets;
 }
 if (TweenLite._internals.isSelector(targets)) {
 targets = [].slice.call(targets, 0);
 }
 }
 l = targets.length;
 for (i = 0; i < l; i++) {
 copy = {};
 for (p in vars) {
 copy[p] = vars[p];
 }
 copy.delay = delay;
 if (i === l - 1 && onCompleteAll) {
 copy.onComplete = finalComplete;
 }
 a[i] = new TweenLite(targets[i], duration, copy);
 delay += stagger;
 }
 return a;
 };

It can be perfect solution for banners, where the size of the javascript files is so important. Use it just like you would use TweenMax staggerTo() method.

TM.staggerTo(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope)

Here is a codepen

See the Pen TweenLite staggerTo by Chrysto (@bassta) on CodePen.