# How to Debug Animations Using Slow Motion and Frame Inspection

> Debug animations effectively with slow motion and frame inspection in Chrome DevTools. Uncover timing and easing errors invisible at normal speed.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: how-to-guide
- Published: 2026-08-03

---

**Slow-motion debugging exposes timing errors and easing issues invisible at normal speed by reducing playback to 0.25× and scrubbing frame-by-frame in Chrome DevTools.**

The `emilkowalski/skills` repository treats animation review as a code-quality discipline requiring every motion to pass ten non-negotiable standards. Debugging animations using slow motion and frame inspection is the primary "feel-check" technique that reveals hidden timing mismatches, incorrect easing curves, and performance bottlenecks before they reach production.

## The Slow-Motion Feel-Check Methodology

According to [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (line 112), systematic slow-motion review is essential to verify that motion respects the repository's ten non-negotiable standards. When playback speed drops to 0.25×, duration mismatches become obvious and "feel-breaking" regressions—such as using `ease-in` on UI elements—surface immediately. This technique transforms subjective "feels off" complaints into identifiable technical fixes.

The methodology requires inspecting animations frame-by-frame to detect jitter, incorrect easing curves, or abrupt changes invisible at full speed (as documented in [`skills/improve-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md) at line 84). By combining DevTools scrubbing with code-based speed overrides, developers can validate interruptibility, GPU compositing, and accessibility compliance before merging.

## Step-by-Step Debugging Workflow

### Pause and Scrub with DevTools

Open Chrome DevTools and navigate to the **Animations** panel. Click the **pause** button to freeze the timeline, then drag the scrubber to inspect individual frames. This frame-by-frame inspection reveals layout thrashing, subpixel rendering issues, and discontinuous motion that smooths over at 60fps.

According to the source analysis, this technique specifically targets "jitter, incorrect easing curves, or abrupt changes" that remain hidden during normal playback.

### Reduce Playback Speed

Use the **Playback speed** slider in the Animations panel to set speed to **0.25×**, or implement a CSS variable override for global speed control. In [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (line 112), slowing playback magnifies duration mismatches and makes it easier to spot violations of animation principles, such as inappropriate easing functions or timing inconsistencies.

Slower playback acts as a microscope for motion, exposing the exact millisecond where an animation violates the ten non-negotiable standards.

### Verify GPU-Only Properties

Open the **Layers** panel in DevTools and confirm that animated properties are limited to `transform` and `opacity`. If you observe animations affecting `width`, `height`, or other layout properties, refactor them to use GPU-friendly transforms.

As noted in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (lines 35-36), animating non-GPU properties causes dropped frames that become especially noticeable when the animation is slowed down. Layout-triggering animations fail the performance standards and require immediate rewriting.

### Test Interruptibility

Trigger the animation repeatedly—such as through rapid clicks—while scrubbing through the timeline. If the animation restarts from zero each time instead of smoothly transitioning from its current state, replace keyframe animations with transitions or spring-based physics.

The repository emphasizes this check in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (lines 33-34): non-interruptible motion appears "stuck" in slow motion and creates a poor user experience that violates the interruptibility standard.

### Validate Accessibility

Toggle the `prefers-reduced-motion` media query in DevTools and verify that animations either soften or disappear entirely. Additionally, confirm that hover-dependent animations are gated behind `@media (hover: hover) and (pointer: fine)`.

According to [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (lines 37-38), accessibility failures become obvious when animations are slowed; respecting `prefers-reduced-motion` is mandatory, not optional.

## Implementing Slow Motion in Code

### CSS Debug Speed Override

Define a debug multiplier using CSS custom properties to toggle between normal and slow-motion playback without editing individual animation durations:

```css
/* Define a debug multiplier (1 = normal, 0.25 = quarter speed) */
:root {
  --debug-speed: 0.25;
}

/* Multiply the original duration */
.my-anim {
  animation-name: slide-in;
  animation-duration: calc(300ms * (1 / var(--debug-speed)));
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pause state for inspection */
.my-anim.paused {
  animation-play-state: paused;
}

```

Changing `--debug-speed` globally satisfies the "feel-check" requirement from [`skills/improve-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md) (line 84) by allowing instant comparison between normal and exaggerated timing.

### JavaScript Frame Scrubber

For precise frame-by-frame analysis without DevTools, manipulate the `animation-delay` property to create a manual scrubber:

```javascript
const anim = document.querySelector('.my-anim');
let frame = 0;
const fps = 60; // target frames per second

function step() {
  // Advance by one frame (≈16.67ms at 60fps)
  anim.style.animationDelay = `-${frame / fps}s`;
  frame++;
}

// Bind to a button for manual stepping
document.getElementById('stepBtn').addEventListener('click', step);

```

Setting a negative `animation-delay` forces the animation to the exact timestamp of the desired frame, enabling surgical inspection of specific moments in the timeline.

## Performance Recording and Analysis

Capture a **Performance** panel recording at normal speed, then replay it at 0.25× to compare timing graphs. As referenced in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) (line 263), this technique surfaces hidden layout thrashing that only appears when the animation timeline is stretched.

Look for jagged frame time graphs and long Layout or Paint entries—these indicate violations of the GPU-only property rule that will cause stuttering on lower-end devices.

## Documenting Findings

Create a markdown table following the format defined in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (lines 78-89):

| Property | Before | After | Rationale |
|----------|--------|-------|-----------|
| Duration | 200ms | 300ms | Respect the 300ms standard for UI feedback |
| Easing | ease-in | cubic-bezier(0.4, 0, 0.2, 1) | Avoid ease-in on user-triggered motion |

Include line citations to the relevant standards in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) to maintain consistency with the repository's code-review process.

## Summary

- **Slow-motion debugging** at 0.25× playback exposes timing errors and easing violations invisible at normal speed.
- **Frame inspection** via DevTools scrubbing or negative `animation-delay` reveals jitter and layout thrashing.
- **GPU-only properties** (`transform`/`opacity`) must be verified in the Layers panel to prevent dropped frames.
- **Interruptibility** requires testing rapid re-triggering to ensure smooth state transitions.
- **Accessibility** checks for `prefers-reduced-motion` and hover gating are mandatory and become obvious under slow-motion review.
- **Documentation** must follow the repository's markdown table format with line citations to [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md).

## Frequently Asked Questions

### How do I enable slow-motion playback in Chrome DevTools?

Open Chrome DevTools, navigate to the **Animations** panel, and select **0.25×** from the playback speed dropdown. This instantly slows the entire animation timeline without requiring code changes, allowing you to expose timing-related regressions during interaction.

### Why should I avoid animating width and height?

Animating layout properties like `width` and `height` triggers browser layout recalculation and painting, which causes dropped frames particularly visible during slow-motion inspection. According to [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (lines 35-36), you must limit animations to GPU-composited properties—specifically `transform` and `opacity`—to maintain 60fps performance.

### What is the "feel-check" technique?

The feel-check is a systematic slow-motion review process defined in [`skills/improve-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md) (line 84) where developers scrub through animations frame-by-frame to verify they meet the ten non-negotiable standards. This technique transforms subjective animation quality assessments into objective technical validation steps.

### How do I document animation fixes for code review?

Create a markdown table with columns for Property, Before, After, and Rationale, following the output format specified in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) (lines 78-89). Include citations to specific lines in [`skills/review-animations/STANDARDS.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) to justify timing, easing, and duration changes according to the repository's documented standards.