Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions

Navigation & Menu Animation Principles Apply Disney's 12 principles to navigation for fluid, intuitive wayfinding. Principles Applied to Navigation 1. Squash & Stretch Menu items can compress slightly on click. Mobile hamburger icon lines should squash during transformation to X. 2. Anticipation Before dropdown opens, trigger item can lift or highlight. Sidebar toggle icon rotates slightly before panel slides. 3. Staging Active nav item should be clearly distinguished. Dropdown menus appear above other content via z index and shadow. Focus hierarchy matters. 4. Straight Ahead & Pose to Pose Define clear states: closed, opening, open, closing. Each menu item has default, hover, active, selected poses. 5. Follow Through & Overlapping Action Dropdown items stagger in (20 30ms delay each). Submenu arrows rotate after text settles. Active indicator slides with slight overshoot. 6. Ease In & Ease Out Menu open: ease out . Menu close: ease in . Hover transitions: ease in out . cubic bezier(0.4, 0, 0.2, 1) for Material style. 7. Arcs Mobile nav sliding in from side should have slight arc. Menu indicator sliding between items can follow subtle curve path. 8. Secondary Action While dropdown expands (primary), shadow grows (secondary), parent item stays highlighted (tertiary). Chevron rotates. 9. Timing Dropdown open: 200 250ms Dropdown close: 150 200ms Hover highlight: 100 150ms Active indicator slide: 200 300ms Stagger per item: 20 40ms Hamburger morph: 300ms 10. Exaggeration Active indicator can overshoot and bounce back. Important nav items can pulse briefly for attention. Mega menus deserve bold entrances. 11. Solid Drawing Maintain consistent spacing during animations. Shadows should be consistent. Icons should stay crisp at all animation frames. 12. Appeal Smooth nav feels professional. Snappy responses build confidence. Navigation is used constantly, so invest in these micro interactions. CSS Implementation Key Properties transform : translateX/Y, scaleY, rotate opacity : fade menus height / max height : accordion menus clip path : reveal effects transform origin : dropdown direction

navigation-menus