From dylantarre-animation-principles
Use when animation runs slow, janky, or causes frame drops
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Diagnose and fix slow or janky animations using Disney's 12 principles.
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.
Diagnose and fix slow or janky animations using Disney's 12 principles.
Issue: Calculating every frame in real-time
Fix: Use pose-to-pose (keyframe) animation. Let the browser interpolate between states using CSS transitions or will-change.
Issue: Too many simultaneous animations Fix: Stagger animations. Offset start times by 50-100ms to reduce concurrent calculations.
Issue: Too many secondary effects
Fix: Remove non-essential secondary animations on low-power devices. Use prefers-reduced-motion query.
Issue: Animating expensive properties (width, height, top, left)
Fix: Only animate transform and opacity. These are GPU-accelerated and skip layout/paint.
Issue: Animating off-screen elements Fix: Only animate what's visible. Use Intersection Observer to pause off-screen animations.
transform instead of position properties - GPU layerwill-change sparingly - Hints to browserwill-change isn't overused/* Fast */
.element {
will-change: transform;
transition: transform 200ms ease-out;
}
.element:hover {
transform: translateY(-4px);
}
/* Slow - avoid */
.element:hover {
top: -4px; /* Triggers layout */
}