Cannot Reverse a Played Timeline

[emilychews]

Hi

 

I have a mouseenter / mouseleave effect on a button.  I'm using this method to prevent a CSS / JS conflict on the button which is also part of a pageload animation.

 

I can get the timeline to play on mouseenter, but I can't seem to get it to reverse on mouseleave? 

Codepen link with HTML and CSS is included, and below is the JS/GSAP code for quick reference

 

// GSAP / JS


// --- button fade in function, invoked in subsequent timeline


function buttonFadeIn() {
    var tl = new TimelineMax();
    tl
    .to(".btn", 1, {opacity: 1, ease:Power3.easeIn})
    .to(".btn a", 1.8, {opacity: 1})
    return tl
}


// --- invokes initial fade in on pageload


function homeTitles() {
    var tl = new TimelineMax();
    tl
    .add(buttonFadeIn());
}
    homeTitles();


// --- mouseenter / mouseleave  on 'Learn More' button


var learnMore = document.getElementsByClassName("btn")[0];


// --- function that is invoked on mouseenter/ mouseleave

function learnMoreHover () {
    var tl = new TimelineMax();
    tl
    .to(learnMore, .3, {opacity: .3})
    return tl;
}


if (learnMore) {
    learnMore.addEventListener("mouseenter", function(){
        learnMoreHover().play()
    }, false);
}


if (learnMore) {
    learnMore.addEventListener("mouseleave", function(){
        learnMoreHover().reverse()
    }, false);
}

 

See the Pen ZrmPjy by emilychews (@emilychews) on CodePen

[Sahil]

In your example you are calling reverse on timeline but timeline's playhead is already at zero so it will never do anything. You can overcome it by passing 1 as progress from which you want to reverse.

 

A better approach is to assign timeline to a variable and use it to play or reverse, which I have done in my example below. You also don't need to use conditional statements while creating events, because you are writing your own project. It only makes sense to do so if you are writing a plugin or something.

 

As for using functions to create timelines, it can be your personal preference but I think it makes more sense for complex animations or where more than 3-4 tweens are involved. Anything less than that just adds complexity to your code which can be written in fewer lines.

 

See the Pen vdQwKm?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[emilychews]

Hi Sahil,

 

Thanks for this.  The reason I've used functions is because the animations are part of more complex animations on the site, but I didn't want to include this other code because it was unrelated to this issue.  I do also have to wrap the event listeners in an if statement because otherwise it throws an error on the other pages of the site (cannot tween a null target) that don't have that button.  Although I have subsequently realised I can wrap both event listeners in the same if statement.

Thanks again.