Navigation

A full-featured mega nav with morphing dropdowns on desktop and a slide-over panel system on mobile. On desktop, hovering a toggle opens a panel; switching between toggles slides content in the direction of travel with a height-morphing container. On mobile (≤991px), the menu opens as a full-screen overlay with staggered nav items and drill-down panels.

A floating pill navigation that opens in two steps: first the bar expands horizontally to full width, then the bottom section reveals the menu links and visual column. All motion is CSS-driven via a single data-nav-status attribute — no GSAP required.

A full-screen overlay navigation with a clip-path reveal, oversized link typography, and a three-bar hamburger that animates into an X. Links slide up from below as the overlay opens, and hovering dims all other items. Entirely CSS-driven via a single data-navigation-status attribute.

A responsive multi-level navigation bar with CSS-driven dropdown panels on desktop (hover + focus) and a burger-menu accordion on mobile. All animations use CSS transitions. Fully keyboard-accessible with ARIA attributes set by JavaScript.

A centered floating pill navigation that expands downward via grid-template-rows to reveal links and a scrolling marquee banner. Links slide up from below with staggered delays. A dark overlay fades in behind the pill when the nav is open. Entirely CSS-driven.

A fixed top navigation for single-page layouts where a pill-shaped indicator slides to highlight the section currently in the viewport. Powered by GSAP ScrollTrigger — each section registers a trigger at 50% of the viewport, and the indicator animates to the matching nav button via CSS transitions.

A corner-anchored hamburger navigation where the background pill scales outward from a small button to fill the menu panel. The content group scales from near-zero to full size with the same origin. Active links show a dot indicator; hovering transfers the dot to the hovered item. Entirely CSS-driven.

A right-anchored side navigation that opens with a layered panel wipe: three colored panels slide in from the right with staggered timing, followed by the menu links animating up from below and fade targets appearing last. Powered by GSAP and CustomEase.

A macOS-inspired dock navigation where hovering an icon magnifies it and proportionally scales the two nearest neighbors. The hovered item grows the most, immediate siblings grow moderately, and second-degree siblings grow slightly. A tooltip fades in above each icon on hover.