Transform and Opacity, Nothing Else
The single rule that decides whether your animation holds sixty frames or stutters on a mid-range phone.
Animate width and the browser recalculates layout for every affected element, on every frame. Animate transform and it hands the work to the compositor. That difference is most of what separates smooth motion from a slideshow.
The Properties That Cost Nothing
transform and opacity can be handled on the GPU without touching layout or paint. Everything in this template is expressed in those two properties, including effects that look like they should need more — the marquee is a translateX, the progress rail is a scaleX, the line reveal is a translateY inside an overflow-hidden mask.
The Ones That Look Innocent
top, left, width, height and margin all trigger layout. box-shadow, border-radius and background-position trigger paint. A shadow that grows on hover is one of the most common causes of jank in marketing sites, and the fix is usually a second pre-rendered shadow layer whose opacity you animate instead.
Measuring Rather Than Guessing
Open the performance panel, record a scroll, and look for long purple bars. Purple is layout. If you see it repeating on every frame during an animation, something in that animation is touching a property it should not.
Where We Compromised
The blur bloom behind the showcase cards animates scale on an already-blurred element rather than animating the blur radius itself. Animating filter: blur() looks better by a small margin and costs several times more, so it did not survive the budget.
