Implementation Debugging

When your animation won't play, plays once and stops, or flickers weirdly, this gives you a systematic debugging checklist tied to Disney's animation principles. It maps symptoms to root causes (timing off, keyframes not hitting, elements clipped by overflow) and includes a table of common bugs like missing fill-mode or layout thrashing. The devtools tips and event listener pattern for logging animationstart/animationend are genuinely useful. It won't teach you animations from scratch, but if something broke between dev and production or works inconsistently across browsers, the troubleshooting checklist gets you unstuck faster than randomly tweaking CSS properties.

skills.sh installs: 532
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill implementation-debugging --agent claude-code

Installs into .claude/skills of the current project.

Files

Implementation Debugging

Debug animation issues using Disney's principles as diagnostic framework.

Problem Indicators

Animation doesn't play at all
Animation plays but looks wrong
Works in dev, broken in production
Inconsistent across browsers
Animation triggers at wrong time
Flickering or visual glitches

Diagnosis by Principle

Timing

Issue: Animation timing is off Debug: Check duration values. Verify units (ms vs s). Check if CSS transition is being overridden. Inspect computed styles.

Straight Ahead vs Pose-to-Pose

Issue: Keyframes not hitting Debug: Verify all keyframe percentages. Check for typos in property names. Ensure values are animatable.

Staging

Issue: Animation hidden or clipped Debug: Check z-index, overflow, opacity. Verify element is in viewport. Check for visibility: hidden.

Solid Drawing

Issue: Visual glitches during animation Debug: Look for subpixel rendering issues. Add transform: translateZ(0) for GPU layer. Check for layout thrashing.

SKILL.md on GitHub