Cheap properties, will-change

Animate compositor-only properties; hint will-change only where needed.

From design-motion-principles, references. See MDN will-change ↗.

… fps

Layout property vs transform

Raise Block main thread to 40 ms and compare.

Layout propertyBad
Invoice
left: 0 → calc(100% - 96px)
TransformGood
Invoice
transform: translateX(…)

Gradient shimmer

Raise the block, then try background-position on the right.

Moving color stopsBad
--stop0/s
Overlay + transformGood
::after { transform }

The will-change budget

Hover or tap the right grid; one card is promoted.

On every cardBad
.card { will-change: transform }
On the one moving nextGood
on pointerenter
card.addEventListener("pointerenter", () => { card.style.willChange = "transform"; });
card.addEventListener("transitionend", () => { card.style.willChange = ""; });

Why it matters, pros and cons

Why it matters

Layout properties reflow every frame; transform and opacity run on the compositor.

Pros

  • Smooth under load and on slow phones
  • No reflow, so neighbours never shift
  • Targeted hints remove first-frame stutter

Cons

  • scale() distorts text and borders
  • will-change is not a jank fix
  • Each layer costs GPU memory; release it after