Why Does Everything Lag?

When you run animation, browser goes through 3 stages:

1. Layout (Reflow): Recalculating sizes and coordinates of ALL elements on page. (Slowest stage).
2. Paint: Drawing pixels.
3. Composite: Gluing already drawn layers (Fastest stage).

Golden Rule:

Animate only properties that cause only Composite:

• transform (scale, rotate, translate)
• opacity

Bad Properties for Animation:

• width, height, top, left, margin. They cause Layout.