fix(nav): remove redundant animations causing flicker

- remove double opacity animation on menu items
- remove slide-in stagger animation
- remove bouncy spring, use smooth easeOut
- remove layoutId animation on active indicator
This commit is contained in:
luccast
2026-02-05 12:27:29 -05:00
parent 1299d415b8
commit 6a60c6e9cd
+4 -10
View File
@@ -99,7 +99,7 @@ export function NavTabs() {
initial={{ opacity: 0, y: -8, scale: 0.96 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: -8, scale: 0.96 }}
transition={{ type: 'spring', damping: 25, stiffness: 400 }}
transition={{ duration: 0.15, ease: 'easeOut' }}
className="absolute top-full left-0 mt-2 z-50 min-w-[200px]"
>
{/* Terminal-style container */}
@@ -119,11 +119,8 @@ export function NavTabs() {
tab.path === currentPath || currentPath.startsWith(tab.path)
return (
<motion.button
<button
key={tab.path}
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.05 }}
onClick={() => handleSelect(tab.path)}
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md transition-all group ${
isActive
@@ -147,12 +144,9 @@ export function NavTabs() {
{/* Active indicator */}
{isActive && (
<motion.div
layoutId="nav-dropdown-active"
className="w-1.5 h-1.5 rounded-full bg-crab-500"
/>
<div className="w-1.5 h-1.5 rounded-full bg-crab-500" />
)}
</motion.button>
</button>
)
})}
</div>