implementation-debugging

dylantarre's avatarfrom dylantarre

Use when animation doesn't work as expected, has bugs, or behaves inconsistently

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Debugging]

When & Why to Use This Skill

This Claude skill provides a specialized framework for diagnosing and resolving complex web animation issues. By combining Disney's classic animation principles with technical CSS and JavaScript debugging strategies, it helps developers identify root causes of visual glitches, performance bottlenecks, and inconsistent behavior to ensure smooth, high-quality user interfaces.

Use Cases

  • Identifying why CSS transitions or keyframe animations fail to trigger or play across different browser environments.
  • Resolving visual artifacts such as flickering, clipping, or choppy motion by optimizing GPU rendering and addressing layout thrashing.
  • Debugging state management issues where animations end abruptly or fail to maintain their final visual state.
  • Using DevTools-based checklists to verify animatable properties, computed styles, and JavaScript execution blocks.
  • Implementing robust code patterns to reset animations and log lifecycle events for better observability.
nameimplementation-debugging
descriptionUse when animation doesn't work as expected, has bugs, or behaves inconsistently

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.

Follow Through

Issue: Animation ends abruptly or wrong state Debug: Check animation-fill-mode. Verify end state matches CSS. Check for competing animations.

Common Bugs

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

Quick Fixes

  1. Check DevTools Animation panel - See timeline
  2. Verify animatable properties - Not all CSS animates
  3. Add animation-fill-mode: forwards - Keep end state
  4. Force GPU layer - will-change: transform
  5. Check for !important - May override animation

Troubleshooting Checklist

  • Is animation class/trigger being applied? (DevTools Elements)
  • Are properties animatable? (display is not, opacity is)
  • Check computed styles for overrides
  • Is element visible? (opacity, visibility, display, z-index)
  • Any JavaScript errors blocking execution?
  • Check Animation panel in DevTools
  • Test in incognito (no extensions)
  • Compare working vs broken environment

Code Pattern

// 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');

DevTools Tips

  1. Elements > Styles: Check computed animation values
  2. Performance tab: Record and analyze frames
  3. Animations panel: Slow down, replay, inspect
  4. Console: Log animation events