playbooks

home / skills / dylantarre / animation-principles / navigation-menus

navigation-menus skill

/skills/07-by-ui-element/navigation-menus

This skill helps you implement Disney-inspired navigation and menu animations for fluid, intuitive wayfinding across interfaces.

npx playbooks add skill dylantarre/animation-principles --skill navigation-menus

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.6 KB
---
name: navigation-menus
description: 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

```css
.nav-dropdown {
  transform-origin: top;
  transition: transform 200ms ease-out,
              opacity 200ms ease-out;
}

.nav-dropdown.open {
  transform: scaleY(1);
  opacity: 1;
}

.nav-indicator {
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
```

## Key Properties
- `transform`: translateX/Y, scaleY, rotate
- `opacity`: fade menus
- `height`/`max-height`: accordion menus
- `clip-path`: reveal effects
- `transform-origin`: dropdown direction

Overview

This skill shows how to apply Disney's 12 principles of animation to navigation bars, menus, sidebars, and wayfinding elements to create smooth, intuitive transitions. It focuses on micro-interactions that improve clarity, responsiveness, and perceived performance. Use it to design cohesive motion systems for web and mobile navigation.

How this skill works

The skill maps each principle (squash & stretch, anticipation, timing, ease, etc.) to concrete navigation patterns: dropdowns, hamburger morphs, indicators, and staggered lists. It prescribes timing ranges, easing curves, and practical CSS properties (transform, opacity, max-height, clip-path) for reliable implementation. Examples include staggered dropdown items, overshooting indicators, and anticipatory icon rotations.

When to use it

  • Designing or refining header, sidebar, or mobile navigation interactions
  • Animating dropdowns, mega menus, or accordion-style navs
  • Creating hamburger-to-X icon morphs and toggle animations
  • Improving wayfinding with sliding indicators or submenu reveals
  • Polishing micro-interactions to increase perceived speed and trust

Best practices

  • Define clear states (closed, opening, open, closing) and discrete poses for each item
  • Use consistent spacing, shadows, and icon clarity across frames
  • Apply small stagger delays (20–40ms) to list items to guide the eye
  • Choose easing per action: ease-out for opens, ease-in for closes, and cubic-bezier for material-style slides
  • Keep durations short (100–300ms) to preserve snappiness and avoid blocking

Example use cases

  • Dropdown menu that scales from top with 200–250ms ease-out and 20ms staggered items
  • Sidebar toggle where the icon anticipates a 15° rotation before the panel slides in an arc
  • Active nav indicator that slides between items with slight overshoot and 250ms cubic-bezier timing
  • Hamburger morph animation that squashes lines slightly and completes in ~300ms
  • Mega menu entrance with exaggerated scale and shadow growth for emphasis

FAQ

What timings and easings are recommended?

Use 200–250ms for dropdown open (ease-out), 150–200ms for close (ease-in), 100–150ms for hover, and 200–300ms for indicator slides. Material-style motion works well with cubic-bezier(0.4, 0, 0.2, 1).

How do I avoid motion that feels sluggish or distracting?

Keep durations short, avoid unnecessary simultaneous motions, use subtle anticipation, and limit exaggeration to important states only.