Animated Mobile Nav

[RawrBear]

Hey guys,

I've been messing with GSAP for a while but I still don't really understand all the bells and whistles.. Yeah, that's why I'm turning to you guys. I feel like I have all the pieces between the docs and some tutorials I've seen but I just can't bolt them together into something that works.

 

So, I'm trying to make a simple mobile nav that that shows when a button is clicked. This project is also using Tailwindcss which isn't making my life any easier right now.  I have been trying to figure this out all day but after 6 re-writes of the idea, I can't get it working.

I want to animate the opening, either by a simple opacity (like the demo should be doing) or sliding down from above.

 

I think I understand how to animate things but the problem is toggling the "display: none" (class of 'hidden' in Tailwind) at the right time. It should be hidden by default, unhide, animate and display until either a link is clicked or the user clicks out of the menu. Then is should reverse the animation and the hide should then happen AFTER the animation ends. 

 

I can toggle the hidden class easily but.. How do you do it when you need it hidden at the start and then stay showing until the reverse of the animation happens?

I've tried writing my own kind of toggle, I've tried using callbacks.. I've now worked myself into a corner because I have no idea where I'm at.

 

Hopefully you guys can show me how this is supposed to be done.

 

Thanks for making this awesome tool for noobs like me to tinker with lol

 

 

EDIT: I've tried a few more things which still don't work. I've added the code to the CodePen and commented it out. If you can tell me where I' going wrong here, I'd greatly appreciate it

 

 

See the Pen LYWMarN by RawrBear (@RawrBear) on CodePen

Edited June 16, 2021 by RawrBear
Updated the code in the CodePen

[GreenSock]

This is very doable, but I'm curious why you feel the need to use tailwind and toggle classes instead of just letting GSAP manage the necessary CSS inline. It's just an added headache to manage the class like that too. Entirely possible, though. 

 

I assume you wanted something like this? 

See the Pen mdWaYpd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

There are quite a few ways to accomplish it. That's just one. Let me know if it's clear enough. 

 

Happy tweening!

[RawrBear]

Hey Jack!!

Thank you so much for this, it's exactly what I need. Looking at your code it seems I wasn't as close as I thought.
If there's a way to set the menu to be hidden from the start without using Tailwind, I'm all for it!  I'm still learning the ways I can use GSAP so if you have more examples, I'd love to see them so I can learn more.

 

Could you explain what "isHidden ? 0 : 1," is, please? I'm guessing its like an IF statement with 0 : 1 being the boolean states?

Thank you again for the code, you guys rock

[OSUblake]

It's a ternary operator.

 

condition ? exprIfTrue : exprIfFalse

 

Basically the same as doing this.

 

let opacity;

if (isHidden) {
  opacity = 0;
} else {
  opacity = 1;
}

 

[RawrBear]

Hey OSUblake!
Thanks for the info and link. My JS skills are not up to scratch to be honest so that hasn't crossed my path before. Now I know I need to go learn some more lol.

GSAP is a beast of the plugin! I'm looking forward to using it more and hanging out here on the forums.

Thanks for all the help