Jump to content
Search Community

Side NavBar Expand and Contract Animation

lilmatchamonster test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

So I am trying to have a smooth animation where upon pressing the hamburger button, the side nav expands from the left side of the screen to its full width then upon pressing the same button again, constricts back inward smoothly. So it toggles open and closed fine, but the animation for it closing is not working. Also when outside of the codepen environment, when you press the button to open, there is a visible jump where it appears that the nav-wrapper div is made visible then from there expands outward using the TweenMax.to().

I am very new to GSAP so this is probably something easy to fix, but I have been working on it for a few days now with no solution.

 

Thank you in advance for helping!

See the Pen JwEaqB by Ash4741 (@Ash4741) on CodePen

Link to comment
Share on other sites

First of all, welcome to GSAP and the forums!

 

I noticed several things:

  1. You're toggling display:block and display:hidden immediately, so your exit animation won't be visible (display:hidden element)
  2. The browser won't report an element's width/size properly if it's display:none. 
  3. That codepen has some very strange things going on with the toggling. Not sure what to make of it, but it seems convoluted. Rather than writing code that depends on a particular class being added/removed for state, I'd recommend using your own "showing" property or something. 

Is this better? 

See the Pen 7f9bd5b45059066f4fe4d528eeae7ddb by GreenSock (@GreenSock) on CodePen

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Hi,

 

Besides Jack's great example here is something I made some time ago for a React app:

 

https://codepen.io/rhernando/pen/ebgoNZ

 

Of course it has the constraint that it uses Bootstrap for the styles (the whole project was built on bootstrap and I made a couple of components for it). It's base on this other trying to use GSAP for Materialize's sidebar nav:

 

See the Pen 3703321fd4b8141cb76d8cedf086069f by rhernando (@rhernando) on CodePen

 

Hopefully this will be helpful in some fashion.

 

Happy Tweening!!!

  • Like 6
Link to comment
Share on other sites

Hi,

 

Here is a live sample of the React component using React Router:

 

https://stackblitz.com/edit/gsap-bootsrap-slide-sidebar

 

I'm going to start creating a re-usable component, but due to other things I'm working on, it might take a while to get it done, but for now that shouldn't be too hard to use. I'll try to set up a public repository with the code and the styles so this can be added to Create React App and it can be customized as needed.

 

Happy Tweening!!!

  • Like 4
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.
×
×
  • Create New...