Animation for mobile menu, probably simple solution

[Dooshan]

Hi, I'm having problems with simple mobile navigation animation. I don't know how to "reset" animation state when resizing window. 

See the Pen rNLqzyX?editors=0010 by stdusan (@stdusan) on CodePen

[akapowl]

 

Hey @Dooshan - welcome to the forums

 

You could use MediaQueryList.addListener() to detect changes on the window size with respect to passing a certain breakpoint.

Any function you call with this, will only get fired, when the breakpoint you set up is being passed.

 

With your setup it could look something like this ( although there is probably a simpler way to handle things, than the one I chose there )

 

See the Pen 33e6a0fe190774293edcdd1533f776ad by akapowl (@akapowl) on CodePen

 

 

Please note, that I made some changes to how your timeline is set up, and to your animateIt() function.

Also note, that with how things are set up, you will get a flash of unwanted content when loading the page on a narrow window-size.

 

If you want to avoid this, you could consider setting your nav as not visible for the initial state, and tween to the visible state instead.

 

 

 

Hope this helps.

 

Cheers,

Paul

 

 

 

[Dooshan]

@akapowlThat's it, thanks!