Jump to content
Search Community

Two different TL animation on hover and click // React

Sherlok test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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.

 

Link to comment
Share on other sites

  • Solution

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

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.
×
×
  • Create New...