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

  Updates:

  19 Aug 2026

  Fixed the text cursor appearing over menu and social links, so they now behave like proper buttons on hover.