CODEWITHSUNDEEP
javascriptjqueryanimationgsap
j_d
j_d

Reputation: 3082

Convert jQuery's eq() to Greensock?

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?

Upvotes: 0

Views: 251

Answers (2)

Yogee
Yogee

Reputation: 1462

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.

Upvotes: 0

Jack
Jack

Reputation: 2970

If your goal is to animate them in a sequenced fashion (one-after-the-other), you could do:

TweenMax.staggerTo(eventList, 0.15, {opacity:1}, 0.15);

Notice the duration (2nd parameter, 0.15 seconds) is the same as the stagger amount (4th parameter, 0.15 seconds), thus they run back-to-back. But you can play with those values to have things overlap slightly or whatever you want.

If you need to be able to control the entire group/sequence (like pause/resume/reverse/timeScale), you could use a TimelineLite:

var tl = new TimelineLite();
tl.staggerTo(eventList, 0.15, {opacity:1}, 0.15);

//now you can control everything like:
tl.pause();
tl.resume();
tl.restart();
tl.seek(0.6);
tl.timeScale(0.5); //half speed
...

I'd strongly recommend watching the "getting started" video at http://greensock.com/get-started-js/ if you haven't already. Once you get the hang of the API, you'll probably love it and realize how much more you can do.

Note: @Yogee suggested using TimelineLite.to() but there is no such static method. It's an instance method. So his code wouldn't work. I'm sure he just meant to use TweenMax or the instance method of TimelineLite :)

Upvotes: 1

Related Questions