mirror of
https://github.com/crabwise-ai/crabwalk.git
synced 2026-08-14 00:57:52 +00:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user