# How to Debug Animations in Slow Motion: A Step-by-Step Guide

> Debug animations effectively in slow motion using Chrome DevTools. Uncover timing flaws, easing issues, and frame drops with this step-by-step guide.

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

---

**Slow-motion debugging exposes timing issues, easing flaws, and frame drops that are invisible at normal playback speed by using Chrome DevTools playback controls, CSS variable multipliers, and frame-by-frame scrubbing techniques.**

The emilkowalski/skills repository treats animation review as a code-quality discipline, requiring every motion element to pass ten non-negotiable standards. Learning how to debug animations in slow motion is the primary "feel-check" technique recommended to validate these standards and ensure motion respects performance and accessibility constraints.

## The 7-Step Slow-Motion Debugging Workflow

When an animation feels "off" at normal speed, systematic slow-motion inspection reveals the root cause. According to [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) at line 112, this workflow validates that motion adheres to the repository's strict quality hierarchy.

### Step 1: Pause and Scrub Frame-by-Frame

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.

Frame-by-frame inspection reveals jitter, incorrect easing curves, or abrupt changes that are 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. This manual scrubbing allows you to verify that interpolation between keyframes follows the intended curve without mathematical errors.

### Step 2: Reduce Playback Speed

Use the **Playback speed** slider in the Animations panel to set the rate to **0.25×**, or override durations globally using a CSS variable multiplier.

Slower playback magnifies duration mismatches and makes it easier to spot "feel-breaking" regressions, such as using `ease-in` on UI elements that should feel responsive. The [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) file at line 112 emphasizes that timing issues become obvious only when stretched across a longer temporal window.

### Step 3: Verify GPU-Only Properties

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

Animating non-GPU properties causes dropped frames that become especially noticeable when the animation is slowed down, as noted in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) at lines 35-36. Layout thrashing at quarter speed appears as visible stuttering that would otherwise be masked at 60fps.

### Step 4: Check Interruptibility

Trigger the animation repeatedly while scrubbing through the timeline. Rapid-fire clicks or hover state toggles should reveal whether the animation restarts from zero each time or respects the current momentum.

Non-interruptible motion appears "stuck" in slow motion and creates a poor user experience. The repository standards in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) at lines 33-34 require replacing keyframe animations with transitions or spring-based physics if they cannot handle interruption gracefully.

### Step 5: Test Reduced-Motion and Hover Gating

Toggle the `prefers-reduced-motion` media query in DevTools and confirm the animation either softens or vanishes entirely. Simultaneously verify that hover-triggered animations are gated behind `@media (hover: hover) and (pointer: fine)`.

Accessibility failures become glaringly obvious when animations are slowed; touch-device users must not see hover-dependent micro-interactions. This validation aligns with [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) at lines 37-38.

### Step 6: Record and Compare Performance

Capture a **Performance** panel recording at normal speed, then replay it at 0.25×. Examine the timing graphs to identify where frame drops, layout shifts, or composite bottlenecks occur.

Performance recordings surface hidden layout thrashing that only appears when the animation timeline is stretched, as referenced in [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) at line 263. Compare the flame charts between normal and reduced speeds to isolate specific property changes causing jank.

### Step 7: Document Your Findings

Create a markdown table documenting "Before → After" changes following the format defined in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) at lines 78-89. Include specific line citations and the rationale for each modification.

Documentation keeps the review process consistent and allows teammates to understand why specific easing curves or durations were adjusted during the slow-motion audit.

## Implementation Techniques and Code Examples

### CSS Debug Speed Override

Define a global debug multiplier to toggle between normal and slow-motion without editing individual animation durations:

```css
:root {
  --debug-speed: 0.25; /* 1 = normal, 0.25 = quarter speed */
}

.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);
}

.my-anim.paused {
  animation-play-state: paused;
}

```

Changing `--debug-speed` globally lets designers and developers instantly switch between production timing and inspection mode, satisfying the feel-check requirement noted in [`skills/improve-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/improve-animations/SKILL.md) at line 84.

### JavaScript Frame-by-Frame Scrubber

For precise manual inspection, use negative `animation-delay` values to seek to specific timestamps:

```javascript
const anim = document.querySelector('.my-anim');
let frame = 0;
const fps = 60;

function step() {
  anim.style.animationDelay = `-${frame / fps}s`;
  frame++;
}

document.getElementById('stepBtn').addEventListener('click', step);

```

This technique forces the animation to the exact timestamp of the desired frame, enabling precise analysis of easing curves at specific percentages of completion.

### Chrome DevTools Playback Controls

1. Open **DevTools** → **Animations** panel.
2. Click the **speed** dropdown and select **0.25×**.
3. Interact with the UI while observing the slowed timeline.

The built-in playback control instantly slows the entire animation timeline, exposing timing-related regressions without requiring code changes.

## Understanding the 10 Non-Negotiable Standards

The emilkowalski/skills repository defines strict animation standards in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md). Slow-motion debugging serves as the primary validation method for these rules, particularly regarding:

- **Easing integrity**: Verifying that cubic-bezier curves produce smooth acceleration
- **Duration budgets**: Confirming that micro-interactions stay within acceptable time limits
- **Origin consistency**: Checking that transforms originate from logical points (center, corner, etc.)
- **Interruptibility**: Ensuring animations can be reverse-played or aborted mid-flight

As stated in [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) at lines 66-70, the hierarchy of motion quality dictates that if an animation cannot be made to feel "right" through slow-motion iteration, it should be deleted entirely rather than shipped with compromises.

## Summary

- **Slow-motion debugging** is the primary technique for validating animation quality in the emilkowalski/skills workflow.
- Use **Chrome DevTools Animations panel** to reduce playback speed to 0.25× and scrub frame-by-frame.
- **Restrict animations** to GPU-only properties (`transform` and `opacity`) to prevent layout thrashing visible at reduced speeds.
- Implement **CSS variables** like `--debug-speed` to toggle between normal and inspection modes globally.
- **Test interruptibility** by triggering animations rapidly; they should handle mid-flight cancellation gracefully.
- **Validate accessibility** by checking `prefers-reduced-motion` support and hover-gated media queries during slow-motion review.
- **Document changes** using the repository's required markdown format to maintain code-quality discipline.

## Frequently Asked Questions

### How do I slow down an animation without changing the original CSS?

Use the Chrome DevTools **Animations** panel and adjust the **Playback speed** slider to 0.25× or 10%. This applies a temporary slowdown without modifying your source code, allowing you to inspect the animation in real-time while preserving the original timing for production.

### Why do animations look jittery when slowed down?

Jittery motion at reduced speeds typically indicates layout thrashing caused by animating non-GPU properties like `width`, `height`, or `margin`. When slowed down, the browser's frame drops become visible as stuttering. Refactor these to use `transform: scale()` or `opacity` changes instead, as required by [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) at lines 35-36.

### What is the "feel-check" mentioned in the Skills repository?

The "feel-check" is a qualitative review process where animations are viewed at quarter-speed to expose hidden timing issues, incorrect easing curves, or abrupt transitions that feel acceptable at 60fps but reveal mathematical errors when stretched. This technique verifies adherence to the ten non-negotiable animation standards defined in the repository.

### Should I delete an animation if it doesn't pass the slow-motion test?

According to [`skills/review-animations/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/SKILL.md) at lines 66-70, the repository maintains a strict hierarchy: if an animation cannot be adjusted to feel correct after thorough slow-motion debugging, it should be removed entirely rather than shipped with compromises. Motion that cannot justify its existence or meet quality standards is considered technical debt.