Playing and reversing animation on mouseenter

[amit95]

I have an animation where on mouseenter, a logo animation plays. The way I'm trying to get this to work is:

 

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

 

If a users mouse enters the default logo and then exits before the animation is finished, I still want the animation to play, reverse and go back to its initial state. Meaning once the animation plays, it needs to finish before restoring to original state.

 

To achieve this, I've tried:

 

tl.reversed() ? tl.play(0) : tl.reverse();

 

However, the animation then doesn't trigger.

 

A visual of the animation can be seen on mouseenter on the demo.

 

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

[Rodrigo]

Hi,

 

I did some consulting in this exact same scenario a few years ago, only not with a logo but a SVG cards hover animations. The concept was the same, wait for the entire animation to play and then reverse it based on a few conditions. So luckily that got stuck in my brain

 

Hopefully this is what you're trying to achieve:

See the Pen jOxegge by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[GreenSock]

Here's another approach that just uses one variable 👍: 

See the Pen bGMQjNJ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

You should probably add your event listeners to the container so they don't fire inadvertently due to whatever you're doing with the animation.