From dylantarre-animation-principles
Use when implementing Disney's 12 animation principles with any animation tool or framework
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Apply all 12 Disney animation principles regardless of your tool or framework.
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 all 12 Disney animation principles regardless of your tool or framework.
Concept: Objects deform when moving, maintaining volume.
Implementation:
scaleX * scaleY ≈ constantValues: Compress to 80%, expand to 120%
Concept: Prepare the audience for an action.
Implementation:
Pattern: Wind-up → Action → Settle
Concept: Direct viewer attention to what matters.
Implementation:
Straight Ahead: Animate frame-by-frame sequentially. Good for fluid, organic motion.
Pose to Pose: Define key poses, then fill in between. Good for precise, planned motion.
Recommendation: Use pose-to-pose for UI, straight ahead for particles/effects.
Concept: Different parts move at different rates.
Implementation:
Concept: Natural motion accelerates and decelerates.
Implementation:
Common curve: cubic-bezier(0.42, 0, 0.58, 1)
Concept: Natural movement follows curved paths.
Implementation:
Concept: Supporting actions reinforce the main action.
Implementation:
Concept: Speed conveys weight, mood, and character.
| Duration | Feel | Use Case |
|---|---|---|
| 50-150ms | Snappy | Micro-interactions |
| 150-300ms | Responsive | Button feedback |
| 300-500ms | Smooth | Page transitions |
| 500-800ms | Deliberate | Modal reveals |
| 1000ms+ | Dramatic | Hero animations |
Concept: Push beyond realistic to enhance clarity.
Implementation:
Concept: Maintain volume and weight in 3D space.
Implementation:
Concept: Make it pleasing and engaging.
Implementation:
Micro-interaction: 100-200ms
Standard feedback: 200-300ms
Content transition: 300-400ms
Page transition: 400-600ms
Enter screen: ease-out (decelerate)
Leave screen: ease-in (accelerate)
On-screen movement: ease-in-out
Bounce/overshoot: spring physics or elastic
Before shipping animation: