GSAP and React - Animated Navigation button and panel

[ARNM]

Hello,

 

I'm just building out a little navigation for myself to see what I can do with my current experience in GSAP and React js.

 

I've got a button with two child span elements, their rotation value animates depending on useState, the click event handler also sets the state for the navigation panel which is initially hidden, then slides out from the right of viewport. It's kind of working how I want it to, except the onMouseLeave function (obviously) fires when the navigation button's state is rotated, so I need to address that. However, I'm starting to think that maybe I'm going about this the wrong way.

 

I was just wondering if someone could check over my code and point out any glaring issues or offer some advice

 

Here's a link to my code sandbox

 

https://codesandbox.io/s/nav-hxcoml?file=/src/Nav.js

[Cassie]

Heya!

 

It's often a good idea to use one timeline and then play and reverse it.

Like so

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

Hope this helps.

p.s have you seen our react guide?