Jump to content


Animation on mouseenter (and mouseleave) not working correctly

Recommended Posts

I have a logo SVG which displays be default (this is the white logo .header-primaryLogo).


On mouseenter of this logo, I'm looking to:

  1. Fade the default logo out
  2. then play the tl animation (which then showcases the secondary logo .header-secondaryLogo)


If you uncomment out line 15 from the CodePen (position: absolute from .header__logo) and then hover over the white logo, you can see the animation is somewhat playing.


What's not happing is that the default logo isn't fading out. Naturally I'm looking for the reverse on mouseleave.


Any ideas why the animation isn't triggering completely on mouseenter?


See the Pen yLjvEvx by amit_rai95 (@amit_rai95) on CodePen

Link to comment
Share on other sites

The mouse event isn't getting through to the primary logo because the secondaryLogo is in the way. If you put the event listener on secondaryLogo, it works. 

  • Like 2
Link to comment
Share on other sites

But that is the problem. 


The primaryLogo should appear and is what triggers the secondaryLogo to appear. The flow is:

  • primaryLogo is visible
  • Users mouse enters primaryLogo
  • primaryLogo fades out
  • secondaryLogo animates
  • Users mouse leaves secondaryLogo
  • secondaryLogo animates out (reverses)
  • primaryLogo fades back in


Link to comment
Share on other sites

I've paused your timeline by default, so that it doesn't animate on page load. Next I've moved your tween of the primaryLogo to the beginning of the timeline (and changed autoAlpha to opacity. autoAlpha sets the element to visibility: hidden; which makes it there are no pointer events, so no mouse enter and leave events will trigger). Now the logo animates outs then it animates the new logo in and on mouse leave it plays the animation in reverse. 


Because of the!tl.isActive() logic in your functions it will only animate backwards if you wait until the whole animation has played

See the Pen JjvBryp?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen


You're using the really old syntax of GSAP v2 and the new syntax v3 in the same animation, no real issue in that, but I recommend sticking to the new syntax, much easier to read and no need to call TimelineMax you can just use gsap.timleine(), check out this topic if you want to move to the new syntax.

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