Two different TL animation on hover and click // React

[Sherlok 0 Likes (Newbie)]

Hello, 

Please, help me to find out how to modify the hover timeline that it works after menu close.

Link to Codesandbox

So, when you hover and leave the toggle btn animation works well. When I press the menu btn another click animation started. When I press this button again, hover timeline stop working.

 

[GreenSock 18,293 Likes (Superhero)]

I don't have time to do a deep dive into all your code, but I noticed: 

• You forgot to add an empty dependency Array to your useLayoutEffect() that calls hoverAnimation(), so it's getting called multiple times, re-creating the animation based on whatever the current state is at that time. So if it's already in the over state, your .to() tweens in that timeline are going to have no effect because the values are already at their destinations.
• You're reversing the rollover animation even when the menu is open, but I assume you mean to skip that. You should probably add isMenuOpen as a dependency on that useCallback()

I assume maybe you intended to do something more like this?: 

https://codesandbox.io/s/gsap-animation-forked-s11973?file=/src/App.js

[Sherlok 0 Likes (Newbie)]

Thank you very much! That's exactly what I wanted to do!