Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
emilychews

Cannot Reverse a Played Timeline

Recommended Posts

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

Link to post
Share on other sites

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

 

  • Like 6
Link to post
Share on other sites

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.

  • Like 1
Link to post
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.

×