From dylantarre-animation-principles
Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Apply Disney's 12 principles to navigation for fluid, intuitive wayfinding.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Apply Disney's 12 principles to navigation for fluid, intuitive wayfinding.
Menu items can compress slightly on click. Mobile hamburger icon lines should squash during transformation to X.
Before dropdown opens, trigger item can lift or highlight. Sidebar toggle icon rotates slightly before panel slides.
Active nav item should be clearly distinguished. Dropdown menus appear above other content via z-index and shadow. Focus hierarchy matters.
Define clear states: closed, opening, open, closing. Each menu item has default, hover, active, selected poses.
Dropdown items stagger in (20-30ms delay each). Submenu arrows rotate after text settles. Active indicator slides with slight overshoot.
Menu open: ease-out. Menu close: ease-in. Hover transitions: ease-in-out. cubic-bezier(0.4, 0, 0.2, 1) for Material-style.
Mobile nav sliding in from side should have slight arc. Menu indicator sliding between items can follow subtle curve path.
While dropdown expands (primary), shadow grows (secondary), parent item stays highlighted (tertiary). Chevron rotates.
Active indicator can overshoot and bounce back. Important nav items can pulse briefly for attention. Mega menus deserve bold entrances.
Maintain consistent spacing during animations. Shadows should be consistent. Icons should stay crisp at all animation frames.
Smooth nav feels professional. Snappy responses build confidence. Navigation is used constantly, so invest in these micro-interactions.
.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);
}
transform: translateX/Y, scaleY, rotateopacity: fade menusheight/max-height: accordion menusclip-path: reveal effectstransform-origin: dropdown direction