majiayu000 Navbar Animation Patterns
Production-tested navbar animations from ArchiKunszt project. Smooth, accessible, performant.
Animation Categories
| Category | Effect | Trigger |
|---|---|---|
| Desktop scroll | Logo/nav/CTA slide out + fade | window.scrollY > 50 |
| Desktop expand | Reverse slide-in on hamburger click | User click (when scrolled) |
| Mobile panel | Full-screen slide from left | Menu toggle |
| Mobile links | Staggered slide from right | Panel open |
| Mobile CTAs | Staggered slide from bottom | Panel open |
| Nav link hover | Underline grows left-to-right | Hover |
Key Behavior: Scroll + Hamburger Expand
Flow:
- Top of page → Full navbar visible (logo text + nav links + CTA)
- User scrolls down → Elements collapse/hide, hamburger appears
- User clicks hamburger → Elements expand back (without scrolling to top)
- User scrolls back to top → Hamburger hides, expanded state resets
This allows quick menu access while scrolled without returning to top.
Core Easing Function
All animations use this cubic-bezier for smooth deceleration:
cubic-bezier(0.16, 1, 0.3, 1)
Quick Implementation
1. Desktop Scroll-Triggered Collapse
React/Next.js with Tailwind:
const [isScrolled, setIsScrolled] = useState(false);
const [isExpanded, setIsExpanded] = useState(false);
useEffect(() => {
const handleScroll = () => {
const scrolled = window.scrollY > 50;
setIsScrolled(scrolled);
if (!scrolled) setIsExpanded(false);
};
window.addEventListener("scroll", handleScroll, { passive: true });
return () => window.removeEventListener("scroll", handleScroll);
}, []);
const showFullNav = !isScrolled || isExpanded;
Apply to elements:
{/* Logo text - slides left */}
<span className={cn(
"transition-all duration-500 ease-out",
showFullNav
? "max-w-[200px] opacity-100 translate-x-0"
: "max-w-0 opacity-0 -translate-x-4"
)}>
Logo Text
</span>
{/* Nav links - slide right */}
<nav className={cn(
"transition-all duration-500 ease-out overflow-hidden",
showFullNav
? "max-w-[600px] opacity-100 translate-x-0"
: "max-w-0 opacity-0 translate-x-8"
)}>
2. Mobile Menu Panel
CSS keyframes for panel + staggered children:
@keyframes slideInFromLeft {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInFromRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInFromBottom {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.mobile-menu-panel {
animation: slideInFromLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mobile-nav-link {
opacity: 0;
animation: slideInFromRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mobile-nav-link:nth-child(1) { animation-delay: 0.1s; }
.mobile-nav-link:nth-child(2) { animation-delay: 0.175s; }
.mobile-nav-link:nth-child(3) { animation-delay: 0.25s; }
.mobile-nav-link:nth-child(4) { animation-delay: 0.325s; }
.mobile-nav-link:nth-child(5) { animation-delay: 0.4s; }
.mobile-cta {
opacity: 0;
animation: slideInFromBottom 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mobile-cta:nth-child(1) { animation-delay: 0.5s; }
.mobile-cta:nth-child(2) { animation-delay: 0.6s; }
.mobile-cta:nth-child(3) { animation-delay: 0.7s; }
3. Nav Link Underline Hover
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--accent-color);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
Accessibility
Always include reduced motion support:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
References
- Complete React component: See references/header-component.tsx
- Full CSS animations: See references/animations.css