Jump to content
Search Community

How to handle mouseenter and mouseleave animation with TimelineMax?

daviddelusenet test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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!

Link to comment
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 5
Link to comment
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?

Link to comment
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
Link to comment
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.
×
×
  • Create New...