Menu reveal animation next js

[Sabz]

Hey everyone, I'm working on a menu animation using gsap. The animation kinda works, but I think it could be smoother. Right now, when I hover over the menu button, the links show up from the middle. I'm trying to make them reveal from just one direction. Any help to make the animation better would be really appreciated.

 

Thanks!

See the Pen ExMjadZ by sabbirzzaman (@sabbirzzaman) on CodePen

[Sabz]

Solved!!

[Rodrigo]

Hi,

 

Is great to hear that you were able to solve it.

 

For what I can see in your demo, you're missing proper animation cleanup in your app and also transition is not a property you can pass to a defaults config on a GSAP Timeline instance. Finally when animating clip path all the values should have a percentage sign after, even zeroes (0%):

.to(menuBtnRef.current, {
  clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",
  width: "0"
})
  .to(menuItemRef.current, {
  clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
  width: "100%",
  gap: "24px"
});

 

Here is a fork of your demo using our brand new useGSAP hook (check here)

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

 

Hopefully this helps.

Happy Tweening!

[Sabz]

Hey @Rodrigo, Here is the updated one. I'm also having another issue with this. If I hover and hover out too frequently the links and the menu both are getting visible. Can you help me with this?

 

What I'm doing here is, initially I'm using transform: translateX: 100%; to the "Menu Links" to make them hidden. And when I'm hovering over the "Menu button" I'm using transform: translateX: 0; to the "Menu links" to make them visible and also using transform: translateX: 100%; to the "Menu button" to make the button hidden.

 

(Note: I'm not sure why the "Menu links" are not hidden initially on CodePen)

 

See the Pen QWobKJe by sabbirzzaman (@sabbirzzaman) on CodePen

[Rodrigo]

Hi,

 

Yeah, when doing something like that is better to just toggle a single instance instead of creating a new timeline on each event handler:

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

 

Finally remember to use our useGSAP hook, is far better, simpler and cleaner, especially for a scenario like this:

https://gsap.com/resources/React

 

Hopefully this helps.

Happy Tweening!