Animate Navbar in and out

[TaiwoJazz]

Hi guys, I'm trying to animate my navbar in and out but I'm getting an error on animation.play()
The component I'm trying to animate is in the Menu component while the buttons that will control the animations are in the Navbar component which happens to be the parent component to the Menu component..

Here is a minimal demo on codesandbox.. Thanks.. @Rodrigo

[Rodrigo]

Hi,

 

The main issue here is what is controlling the state that actually renders the navbar:

{active && <Menu showMenu={handleShowMenu} closeMenu={handleCloseMenu} />}

So as soon as active is falsy the navbar is not rendered any more, so no out transition.

 

One alternative is to control that using the set state method, using an onComplete callback once the out animation is done:

https://codesandbox.io/s/animate-navbar-in-and-out-forked-xi1boj?file=/src/components/Navbar.jsx

 

Another alternative is to use React Transition Group to control that using GSAP for the animations in the onEnter/onExit hooks or the addEndListener method:

https://reactcommunity.org/react-transition-group/transition

 

Let us know if you have more questions.

 

Happy Tweening!

[TaiwoJazz]

Hi @Rodrigo I must commend you for helping me out here... I really appreciate it... I have checked your solution and it's pretty impressive... There is no way in hell I'm was ever going to come up with that logic... I will seriously take the time to study your solution... You are the best... Thanks a lot...

[TaiwoJazz]

@Rodrigo Going though the code to figure out the reason why the open navbar button doesn't work on the first click when the dom loads... works on the second click only...

If refresh, it won't work on first click...

[TaiwoJazz]

I was able to fix it... setShow state started at false instead of true... Thanks..