Moving an animation to CSS cut INP from 240ms to 80ms

Moving an animation to CSS cut INP from 240ms to 80ms

INP — Interaction to Next Paint — measures how fast a page reacts after you tap. Animations run in JavaScript can clog the same lane that handles your clicks, so taps feel late. Think of it like one cashier juggling both the line and a phone call: everyone waits.

A menu opened with a JavaScript animation that ran on every frame. While it played, taps queued behind it, so INP hit 240ms.

The fix handed the animation to CSS, which runs on a separate track the browser optimizes:

— Replaced the JS animation with a CSS transition.
— Animated transform and opacity (the two cheapest properties).
— The main lane stayed free for taps.

Result: INP dropped to 80ms, and the animation looked smoother.

Try this: if an animation runs in JavaScript, see if a CSS transition can replace it.