incremental delay with multiple matching html elements

[pier]

When I have a list of elements I always do a for loop, tween each element, and add something along these lines to get incremental animations.

TweenLite.from($('.something'),.5,{opacity:0,delay: i * 0.1});

But is there a GSAP way of accomplishing this when selectors match multiple HTML elements?

TweenLite.to($('div'),.5,{opacity:0,autoIncrementDelay:0.1});

Like a magical self incrementing delay property?
 

 

I've been using GSAP for years (since 2007 I think) and this is the first time I have wondered if this is even possible.

[GreenSock]

Absolutely. TweenMax, TimelineLite, and TimelineMax all have staggerTo() and staggerFrom() methods that do exactly that

 

My favorite is the timeline ones because it allows you to control the entire group as a whole:

var tl = new TimelineLite();
tl.staggerFrom(".something", 0.5, {opacity:0}, 0.1);

Notice that 4th parameter - that's the stagger amount. 

 

Now you can tl.pause(), tl.resume(), tl.reverse(), tl.timeScale(...) or whatever. You're gonna love it

[Carl]

some examples:

 

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/staggerTo/

http://greensock.com/stagger

http://greensock.com/playpause

[pier]

Have I been living in a cave?

Thanks guys!