Jump to content


Drawer Examples

Recommended Posts

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




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

Link to comment
Share on other sites

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:



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!

Link to comment
Share on other sites

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! 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.