Navigation Menus

dylantarre/animation-principles/skills/07-by-ui-element/navigation-menus

by dylantarre83597134ba8fNo license99 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 9 months ago

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

Instructions onlyDesign & Creative

AI-generated overview

Guidance for animating navigation bars, menus, and sidebars using Disney's 12 animation principles.

What it does: This skill provides principles and CSS guidance for animating navigation bars, dropdown menus, sidebars, and other wayfinding elements. It maps Disney's 12 animation principles to navigation interactions, covering states, timing, easing, staggering, and secondary motion. It includes example CSS for dropdowns and active indicators, plus a list of relevant animatable properties.
When to use it: Use it when adding or refining motion for navigation bars, menus, sidebars, or wayfinding elements. It suits work that needs smooth, intuitive transitions and consistent timing across menu states.
Requirements: No scripts or special tools are required; it is instructions only. The CSS examples assume a web environment where CSS transitions and transforms are available.

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);}

.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

Source and attribution

Source:dylantarre/animation-principlesinskills/07-by-ui-element/navigation-menusat commit8359713

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Navigation Menus

Navigation & Menu Animation Principles

Principles Applied to Navigation

1. Squash & Stretch

2. Anticipation

3. Staging

4. Straight Ahead & Pose to Pose

5. Follow Through & Overlapping Action

6. Ease In & Ease Out

7. Arcs

8. Secondary Action

9. Timing

10. Exaggeration

11. Solid Drawing

12. Appeal

CSS Implementation

Key Properties

Source and attribution

More from dylantarre/animation-principles

Rive Animations

Timing Principle Mastery

Ux Friction

User Feedback Clarity

Straight Ahead Pose Mastery

Universal Solutions

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design