Collapsing menu navigation

[Roman Kovalev]

Hey, there! 
I'm woking on collapsing menu elements with GreenSock. The idea is to create elements to appear on desktop as it is, but in mobile version it goes like accordion. And I have experienced some kind an issue.

I need GreenSock to work in mobile only and when I'm back to desktop - greensock stops its functionality. So far I' m using flags  to understand if the version is mobile and clear tweens via clearProps:"all" (dont think its the best approach).  And the issue is: when I'm switching between mobile and desktop versions some time (often) menus are not collapsing, or collapsing with the wrong height size, or with wrong appearance of menu elements. I've made codepen example. Can you, guys, point me whats wrong? 

See the Pen jLEPEJ by NeedHate (@NeedHate) on CodePen

[Carl]

Sorry, I don't understand what your demo is supposed to do. I didn't see any animation and clicking on words only took me to other websites. I tested on both desktop and my phone. If I'm viewing it on my phone how am I supposed to switch to the desktop version and know what isn't working?

 

Please provide some more details so we have a better idea of what we should be seeing and what issue needs to be fixed. Thanks.

[Roman Kovalev]

My appologies for not asking right. Set the width of a pen to 600px, it goes to a mobile version. Then click on headings. They have to open the list of submenu links animating height and submenu elements appearance. When you go back to a "desktop" version (upper then 600px) the block becomes as a simple grid. Then back to "mobile". And animation crushes: not setting right height or submenu elements dont appear from left to right.