Smithery is now a part of Arcade.dev! Read more in our announcement here
Use when animation doesn't work as expected, has bugs, or behaves inconsistently
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');
