From dylantarre-animation-principles
Use when animation doesn't work as expected, has bugs, or behaves inconsistently
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Debug animation issues using Disney's principles as diagnostic 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.
Debug animation issues using Disney's principles as diagnostic framework.
Issue: Animation timing is off Debug: Check duration values. Verify units (ms vs s). Check if CSS transition is being overridden. Inspect computed styles.
Issue: Keyframes not hitting Debug: Verify all keyframe percentages. Check for typos in property names. Ensure values are animatable.
Issue: Animation hidden or clipped
Debug: Check z-index, overflow, opacity. Verify element is in viewport. Check for visibility: hidden.
Issue: Visual glitches during animation
Debug: Look for subpixel rendering issues. Add transform: translateZ(0) for GPU layer. Check for layout thrashing.
Issue: Animation ends abruptly or wrong state
Debug: Check animation-fill-mode. Verify end state matches CSS. Check for competing animations.
| Symptom | Likely Cause | Fix |
|---|---|---|
| No animation | Property not animatable | Use transform instead of changing property directly |
| Flicker at start | No initial state | Set initial values explicitly |
| Wrong end state | Fill mode | Add forwards to animation |
| Choppy motion | Layout thrashing | Animate only transform/opacity |
| Works once only | Animation not reset | Remove and re-add class, or use JS |
animation-fill-mode: forwards - Keep end statewill-change: transform!important - May override animationdisplay is not, opacity is)// Debug: Log animation events
element.addEventListener('animationstart', (e) => {
console.log('Animation started:', e.animationName);
});
element.addEventListener('animationend', (e) => {
console.log('Animation ended:', e.animationName);
});
// Debug: Check computed animation
const styles = getComputedStyle(element);
console.log('Animation:', styles.animation);
console.log('Transition:', styles.transition);
// Reset animation
element.classList.remove('animate');
void element.offsetWidth; // Trigger reflow
element.classList.add('animate');