Navigation Menus
This applies Disney's 12 animation principles to navigation menus, dropdowns, and sidebars. You get specific timing recommendations (200-250ms for dropdown opens, 20-40ms stagger delays between items), easing functions for different contexts, and concrete examples like hamburger icon morphs and active indicator slides with overshoot. The guidance covers everything from anticipation cues before a dropdown opens to secondary actions like shadow growth and chevron rotation. It's thorough without being prescriptive, giving you the principles and suggested timings so you can make navigation feel intentional instead of just functional. Most useful when you're building component libraries or design systems where these micro-interactions need to be consistent across an entire application.
- skills.sh installs
- 601
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill navigation-menus --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Buttons Ctas598
- Figma Prototyping597
- Brand Marketing594
- Solid Drawing Mastery593
- Animator Traditional591
- Motion One589
- Naturalistic Motion589
- Attention Direction586
- Squash Stretch Mastery583
- Fintech Banking581
- Icons Badges581
- Staging Mastery581
- Gesture Responses579
- Arc Mastery578
- Follow Through Overlapping578
- Gaming Entertainment578
- Appeal Mastery577
- Accessibility Advocate576
- Anticipation Mastery575
- Entrance Animations572
- Modals Dialogs572
- Slow In Out Mastery572
- Spatial Thinking572
- Ux Researcher571
Recommended
More Design & UI/UX
pixel-artomer-metin/skills-for-antigravityDeep pixel art expertise covering fundamentals, limited palettes, dithering patterns, subpixel animation, tile design, retro hardware constraints, and HD-2D hyb594skills.sh installs
latex-postersdavila7/claude-code-templatesCreate professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientifi592skills.sh installs
website-builder-setuptenfoldmarc/website-builder-setupInstall the full AI website builder stack — UI/UX Pro Max, Framer Motion animations, and 21st.dev components. One skill, three tools, zero coding experience nee592skills.sh installs
stardustadobe/skillsGuided multi-page redesign of an existing website through a four-phase pipeline — extract (crawl and capture the current site), direct (set a visual direction),569skills.sh installs
calm-relaxationdylantarre/animation-principlesUse when creating animations that soothe users, reduce anxiety, or create peaceful, meditative experiences.566skills.sh installsenterprise-b2bdylantarre/animation-principlesUse when designing animations for enterprise software, B2B platforms, admin dashboards, or corporate applications558skills.sh installs