Search code examples
javascriptjquerygsap

How can I remove a class *after* a GSAP timeline animation finishes?

I've created a simple GSAP timeline animation to slide a fullscreen div over the entire viewport.

Because the page that it's going to be sliding in over has scrollable content on it, I've set the visibility to hidden, and pushed it off of the page. When I click the selected nav link, the class of "active" is added and the animation fires.

For some reason, when I reverse it, it removes the class immediately, even if I add something like this:

$(closeAbout).on('click', "#close", function () {
            timeline.reversed() ? timeline.play() : timeline.reverse();
            $("#teambio").removeClass('active');
        });

I've included all of the timeline code below, in case that's helpful to anyone:

var closeAbout = $('#close');
var openAbout = $('#about');
var main = $('main');

var timeline = new TimelineMax({
    paused: true,
    reversed: true
});

timeline
    .to( "main", 0.3, {
        opacity: 0,
    }, 0)
    .to(".about", 1, {
        y: "0%",
        ease: Power4.easeInOut
    })
    .to(".blurb", 1, {
        y: "0%",
        opacity: 1,
        ease: Power4.easeInOut,
        delay: 0.5
    }, 0)
    .to("#close", 0.5, {
        opacity: 1,
        ease: Power4.easeInOut,
        delay: 0.8,
    }, 0);

$(openAbout).on('click', "#about", function () {
    $("#teambio").addClass('active');
    timeline.reversed() ? timeline.play() : timeline.reverse();
});

$(closeAbout).on('click', "#close", function () {
        timeline.reversed() ? timeline.play() : timeline.reverse();
        $("#teambio").removeClass('active');
    });

All I want is for the class to be removed AFTER the timeline finishes, and for some reason nothing that I've tried is working.

Also, I know that I could probably structure and name all of this better than it appears here, but I'm both new to GSAP and also just trying to get this to work.

Any help and patience would be greatly appreciated.

Solution

  • With something like this:

    timeline.reversed() ? timeline.play() : timeline.reverse();
$("#teambio").removeClass('active');

    The .play() or .reverse() function will run and start animating. Once that function returns, the next line will run, removing the class. You wouldn't want the next line to wait for the animation to complete because then all of your JavaScript would be waiting for the animation to complete!

    What you should do instead is make use of GSAP's onComplete callback:

    var timeline = new TimelineMax({
    paused: true,
    reversed: true,
    onComplete: function() {
        $("#teambio").removeClass('active');
    }
});

    GSAP will fire that function every time the tween completes.

    By the way, we recommend that you upgrade to GSAP 3 doing so is easy! The new formatting is quite nice once you're used to it.