Drawer Examples

[Zergor 2 Likes (Newbie)]

Hey Guys! 
 

I'm creating a website with React that has a menu button that opens a drawer for mobile/tablet. 
 

I'm using the MUi drawer (temporary drawer, left) and it *almost* works great. In Chrome for IOS, there's a bug with css transitions in which if you switch tabs and come back, the animation gets worse and after three times, the animation stops instantly. 

 

I came across gsap/motion/react spring, all of which work great with the chrome iOS bug as they don't use css transitions. 

 

Problem is my JS skills are weak (slowly improving) and I've no idea how to recreate the MUI drawer from scratch using GSAP. I get by with modifying existing examples.

 

A bit of a long shot but does anyone have any recent codepens that function similar to the MUI example?

 

- Click on the menu, opens drawer. 

- Click on a close menu button, closes drawer 

- Click on the remaining body, closes drawer

 

https://mui.com/material-ui/react-drawer/

 

Thanks in advance if anyone has any examples they can share if they've made any in recent months. 

[Rodrigo 5,082 Likes (Superhero)]

Hi @Zergor and welcome to the GreenSock forums!

 

I have this example lying around that uses Flexbox and GSAP 2 syntax 🤯:

See the Pen gBwZaM by rhernando (@rhernando) on CodePen

 

Unfortunately is a bit late so you'll have to wait a few hours for me to translate that into a React example using current GSAP syntax.

 

This are a few examples of toggle menu buttons in React (useful to understand the whole toggle a GSAP instance approach in React), but it seems that right now codesandbox is not working particularly good:
https://codesandbox.io/s/distracted-water-7mrwr9

https://codesandbox.io/s/gallant-poincare-4xwkrp

 

Hopefully this is enough to get you started. Let me know if you are still interested in turning the first example into an up-to-date GSAP + React example.

 

Happy Tweening!

[Zergor 2 Likes (Newbie)]

Hey @Rodrigo! 
 

Thanks a lot for sharing this and all the additional info! 
 

I should be able to get this into my project once I’ve fiddled around with the code. It’s a great starting point! 
 

I’ll reply back here if I stumble across any blockers on my side. 
 

Thanks again!