Animation that costs nothing

There is a common belief that motion and speed cannot coexist, so if you want a Lighthouse score above 90 you have to strip the site down to something lifeless.

That is not true. What costs you is which property you animate, not whether you animate at all.

Two categories

For every frame, a browser may do up to three jobs: lay out, paint, and composite. A cheap animation is one that only needs the last of those.

• Cheap: transform and opacity — run on the GPU, never re-lay-out the page
• Expensive: width, height, top, left, margin — recalculate layout every frame

A dropdown that opens by animating height recomputes the position of everything below it, sixty times a second. The same dropdown with transform: scaleY() is nearly free.

A mistake we made ourselves

On this very site, everything above the fold started at opacity: 0 and faded in. The animation was textbook cheap — opacity and transform only.

The performance score was zero.

Chrome does not count fully transparent content as content. First Contentful Paint never fired, because as far as the browser was concerned the page was blank until the animation finished.

The fix was one number: start the animation at opacity: 0.35 instead of 0. The eye cannot tell, but the browser sees content from the first frame.

The rules we work to

• Nothing above the fold starts at zero opacity
• Anything that appears on scroll animates transform and opacity only
• Every animation switches off under prefers-reduced-motion

The site we build for you scores above 90 on mobile with all its effects running — not by turning them off, but by choosing them properly. See the work.