<b>Which animations are safe for layout shift (and which aren't)</b>

<b>Which animations are safe for layout shift (and which aren't)</b>

Not all motion counts against CLS — Cumulative Layout Shift. The metric only cares when an element <i>pushes other content out of the way</i>. So the kind of animation you choose decides whether Google penalizes it.

The key idea: animating an element's <i>position in the layout</i> shoves its neighbors. Animating only how it's <i>painted</i> doesn't.

Safe to animate freely:
— <code>transform</code> (move, scale, rotate) — neighbors don't budge
— <code>opacity</code> — fading never shifts anything

Risky, counts as shift:
— <code>top</code>, <code>left</code>, <code>margin</code>, <code>height</code> — these reflow the page

Think of <code>transform</code> as sliding a sticker across a finished poster, versus re-cutting the whole poster.

<b>Try this:</b> Find one hover or slide-in effect using <code>margin</code> or <code>top</code> and rewrite it with <code>transform: translate()</code>. Same look on screen, zero layout shift counted.