Animated full-screen navigation menu with cascading reveal effect. Coloured layers slide in first, followed by the main panel and staggered menu items.
How it works:
- Click the Menu button to trigger animation
- Coloured pre-layers slide in sequentially
- Main panel follows with smooth easing
- Menu items animate with stagger (slide up + rotate)
- Item numbers fade in with delay
- Social links reveal at bottom
- Plus icon rotates to X
- Click outside or button to close
Features:
- Full-screen sliding panel
- Multiple coloured pre-layers (up to 4)
- Large menu items with staggered entrance
- Optional item numbering (01, 02, etc.)
- Social links section
- Left or right position
- GSAP-style cubic-bezier easing
- Hover accent color on items
- Click outside to close
- 4 native Framer font controls
Typography Controls:
- Menu Font — main navigation items
- Button Font — toggle button text
- Number Font — item numbering
- Social Font — social links section
Perfect for:
- Agency websites
- Portfolio sites
- Creative studios
- Landing pages
- Full-screen navigation
- Mobile-first menus
Francisc Toth
