mcpField
N
navigation-menus

navigation-menus

github.com/dylantarreDesign & UI132561 installsUpdated 43w ago
Repository

About navigation-menus

navigation-menus is a guide for designers and frontend developers applying Disney’s 12 animation principles to navigation. It covers menu states, timing, and CSS properties for interaction effects.

Key features

  1. 01Applies 12 animation principles to navigation
  2. 02Defines menu opening and selected states
  3. 03Suggests durations and stagger intervals
  4. 04Lists CSS animation properties

Use cases

  1. 01Designing dropdown open and close effects
  2. 02Planning mobile side navigation motion
  3. 03Tuning menu entrances and indicator slides

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dylantarre/animation-principles --skill navigation-menus

After installing, type/navigation-menusin Claude Code to confirm it loaded.

Details

From the project README

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

.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

Comments

Markdown supported