amit95 Posted October 4, 2022 Share Posted October 4, 2022 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: Fade the default logo out 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 More sharing options...
geedix Posted October 5, 2022 Share Posted October 5, 2022 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. 2 Link to comment Share on other sites More sharing options...
amit95 Posted October 5, 2022 Author Share Posted October 5, 2022 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 More sharing options...
mvaneijgen Posted October 5, 2022 Share Posted October 5, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now