Jump to content


incremental delay with multiple matching html elements

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?


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.

Link to comment
Share on other sites

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 ;)

  • Like 2
Link to comment
Share on other sites

Have I been living in a cave?

Thanks guys!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.