amit95 Posted October 9, 2022 Share Posted October 9, 2022 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 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 9, 2022 Solution Share Posted October 9, 2022 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! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted October 10, 2022 Share Posted October 10, 2022 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. 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