Debug in slow motion
Replay an animation slower, or frame by frame, to find what feels off.
Emil Kowalski@emilkowalskiMost people animate by trial and error. They tweak the duration, swap the easing, or ask the agent to help. But it still feels off, and you can't tell why.
Emil Kowalski@emilkowalskiA high-ROI tip from animations.dev is to record your animations and play them frame by frame to spot imperfections you wouldn't otherwise notice. These hidden imperfections are what makes an animation feel off, even though it looks alright at first glance.
From emil-design-eng, “Debugging Animations”.
1 · Spot it at full speed
Play both at 1×, pick the flawed one, then replay slowly.
A?
B?
Play both, then pick one.
2 · Scrub it frame by frame
Slow it down or scrub. , and . step one frame.
Wrong origin, 2 clocksBad
overlay 400ms lineardialog 200ms ease-inorigin top leftOne clock, centeredGood
overlay + dialog 240ms ease-outorigin center
Frame 24 / 24 · 400 ms
.overlay, .dialog {
transition-duration: 240ms;
transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.overlay { transition-property: opacity; }
.dialog {
transition-property: opacity, transform;
transform-origin: center;
}
.dialog:not(.open) { opacity: 0; transform: scale(0.92); }3 · Record it, then fix it
Tick a fix, then click a frame to inspect it.
Your build3 flaws
3 flaws left: two clocks, top-left origin, ease-in.
document.getAnimations().forEach((a) => (a.playbackRate = 0.25));
document.getAnimations().forEach((a) => {
a.pause();
a.currentTime = 120;
});Why it matters, pros and cons
Why it matters
A 240ms entrance is 14 frames. Slowed down, “feels off” becomes a frame.
Pros
- Names the property, frame and value.
- Catches sync, origin and curve bugs.
- Free: DevTools or a screen recording.
Cons
- Slow motion exaggerates; make the call at 1×.
- You cannot judge duration slowed down.
- rAF animations ignore
playbackRate; scale their clock.