Convert jQuery's eq() to Greensock?

Question

I'd like to use GSAP (Greensock) to animate the opacity of a bunch of divs of a certain class. This is the working jQuery function I've been using, and can't figure out how to get it converted to GSAP:

function showEvents() {
    eventList.eq(eventCount++).animate({
        opacity: 1
    }, 150, showEvents);
};
showEvents();

As you can see, it stops firing when all eventList items have been animated... How to do this with GSAP?

Answer 1

function showEvents() {

    TweenMax.to(eventList.eq(eventCount++), 0.150, { 
        autoAlpha: 1, 
        ease: Power1.easeInOut, 
        onComplete: showEvents});
}

Here:

TweenMax : is module which has functionality to do GSAP animation.

.to: is method to 'animate to'. Means, it will change state of your selected element and bring them to given condition. There is another method 'from' which means 'amimate from' given condition in parameter to current condition.

Arguments:

First argument is selector, select elements where you want to change. if you are using JQuery, you can use jquery selector.

Second argument is animation duration in seconds. It's 150 ms in my example.

Third argument is animation parameters. You can see them in details here about TimelineLite. In this example, "autoAlpha: 0" means selected elements will have alpha zero at end of the animation (i.e. after 1 second). "ease: Power1.easeInOut" is ease method that you want to perform. There are many ease that you can checkout and select which you want. See jumpstart tutorial of GreenSock to see ease methods in action.