Jump to content
daviddelusenet

How to handle mouseenter and mouseleave animation with TimelineMax?

Recommended Posts

Hi all,

 

Currently I'm using GSAP to animate a button. There are two timelines, one for the mouseenter animation and one for the mouseleave animation.

 

When you hover over the button the following timeline gets restarted:

this.enterExploreTL = new TimelineMax();
this.enterExploreTL.pause();

this.enterExploreTL
  .to(this.border, 1, {
    rotation: 360,
    transformOrigin: '0 50% 0',
    ease: Quad.easeInOut
  })
  .to(this.border, 0.4, {
    fill: '#000',
    ease: Quad.easeInOut
  }, '-=0.6');

Mouseenter just triggers the following code: 

this.enterExploreTL.restart();

So what happens here is that I animate a border to change its fill and transform it. This animation takes one second to complete.

If you mouseleave the button you restart the following timeline:

this.leaveExploreTL = new TimelineMax();
this.leaveExploreTL.pause();

this.leaveExploreTL
  .to(this.border, 0.4, {
    fill: this.fill,
    ease: Quad.easeInOut
  });

This timeline just returns the border fill to its original color. Now for my problem:

When you trigger the leaveExploreTL 0.4 seconds or more before the enterExploreTL is finished the fill which I set in leaveExploreTL is being overwritten by the enterExploreTL animation.

 

So I thought: "let's check if the enterExploreTL is active when I want to start the leaveExploreTL. If so, just kill the part which sets the fill.". I did that like so:

if (this.enterExploreTL.isActive()) {
  this.enterExploreTL
    .kill({fill: true});
}

this.leaveExploreTL.restart();

If the kill code gets executed the fill animation part doesn't work anymore when I restart the enterExploreTL again. 

So my question is: how can I make the leaveExploreTL overwrite the enterExploreTL fill animations?

 

Thanks in advance!

Share this post


Link to post
Share on other sites

Hello daviddelusenet! Welcome to GSAP forum.

 

Please could you provide a quick codepen about your problem so we can explore your code and make some quick edits for it.

Here's how to create codepen....

 

Waren | GSAP Enthusiast

  • Like 2

Share this post


Link to post
Share on other sites

Hello daviddelusenet and Welcome to the GreenSock Forum!

 

Have you tried just to hover in and play() and then hover out reverse() ?

 

You can see the concept here in these examples:

You basically create a timeline in a paused state .. paused:true. The create your timeline instance with tweens. And then inside a hover or mouseenter/mouseleave event you play() and pause() when hovered.

 

But like WarenGonzaga advised a codpeen example is best to see your code in context

  • Like 4

Share this post


Link to post
Share on other sites

Thanks for your response Jonathan. The animations I'm doing aren't just reversed versions of each other. One animation is taking 1 second and the other is taking 0.4 second.

The duration difference is causing the problem. When I trigger the enter animation (which is 1 second) and after 0.2 seconds I trigged the leave animation (by leaving the button) the leave animation gets triggered and finished before the enter animation.

 

This causes the enter animation the overwrite the leave animation styling. I tried to solve it like this:

if (this.enterExploreTL.isActive()) {
  this.enterExploreTL
    .kill({fill: true});
}

this.leaveExploreTL.restart();

This works one time. If the kill-code gets triggered and I restart the enterExploreTL again the fill won't be animated anymore. How can I kill the fill animation but make it work on a restart?

Share this post


Link to post
Share on other sites

if you just want them to play at different speeds during forward or reverse you can change timeScale() or duration() like

 

$(document).on("mouseenter", "#cardWrapper", function() {
    tl.play().timeScale(1);
}).on("mouseleave", "#cardWrapper", function(){
    tl.reverse().timeScale(8);
});
 
here is a for of on of Jonathan's examples: http://codepen.io/GreenSock/pen/yVKMbd?editors=0010
 
If you need a different animation for forward and reverse it is better to just create those animations on mouseenter and mouseleave instead of trying to manage pre-existing ones. If the user is doing mouseleave / mouseenter quickly it will never look good if you are pausing the current animation at the current time and then trying to start another animation. If you try to kill() an animation like you are trying, it is going to remove that animation entirely. 
 
so do something like:
 
$(document).on("mouseenter", "#cardWrapper", function() {
    var tl = new TimelineLIte()
   //.. .add animation code
}).on("mouseleave", "#cardWrapper", function(){
    var tl = new TimelineLIte()
   //.. .add animation code
});
  • Like 5

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.