What is cheap to animate
Transform and opacity run on the compositor. Everything else drags layout or paint through every frame, and on a mid-range phone that is the difference between smooth and not.
The pipeline from the first lesson of Phase 01 explains the whole of animation performance. Changing width forces layout, paint and composite on every frame. Changing background-color skips layout but still repaints. Changing transform or opacity can be handed to the compositor, which is why those two are the only properties you should be animating at sixty frames per second.
Height is the awkward case, because animating to auto is not possible and transform: scaleY distorts the contents. The modern answers are interpolate-size with a keyword, or animating grid-template-rows, or accepting a clip-path. Whichever you choose, choose it knowing the cost rather than discovering it on a cheap Android.
will-change promotes an element to its own layer in advance, which helps precisely once and hurts if you leave it on. Applied to everything, it consumes memory and can make the whole page slower. Add it immediately before the animation and remove it after, or do not use it.
You should now be able to
- Name the properties that skip layout and paint
- Rewrite a left or width animation as a transform
- Use will-change without making things worse
Loading…