FLIP Morphing Mega Menu
Header navigation whose flyout container morphs between panel sizes with GSAP Flip instead of popping, with staggered card reveals.
About This Component
Header navigation whose flyout container morphs between panel sizes with GSAP Flip instead of popping, with staggered card reveals. A single self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and GSAP, no framework. Ships in three visual variants (vault, paper and corporate) switched by a single data-variant attribute, so you can preview it in a style close to your own site before restyling.
What's Included
- Container width and height morph between panels with GSAP Flip
- Cards stagger in as each panel opens
- Opens on hover and keyboard focus, closes on leave with a short grace period
- The gap under the nav is padding, so the pointer can travel down into the panel
- Chevrons rotate with the active trigger
- Three shipped variants: vault, paper, corporate
Perfect For
- Marketing sites with rich multi-column navigation
- Web apps with grouped feature menus
- Documentation sites with sectioned resource menus
How It Works
FLIP container morph
Before switching panels the script records the flyout box with Flip.getState, swaps the active section, then Flip.from tweens width and height from the old size to the new. Dimensions tween, never scale, so the text inside never squashes.