1 min lesson
Animate on the compositor, not the main thread
Say what this means in practice: "Two properties animate without touching layout or paint: transform and opacity."
Step 1 of 3
Animate on the compositor, not the main threadthe single most important rule
Two properties animate without touching layout or paint: transform and opacity. The compositor handles them on the GPU, often on a separate thread, so they keep moving even when JavaScript is blocked. Everything else is suspect.
Learn more
Advanced table
If a property changes geometry, the browser must re-measure the page
- Property
- transform: translate / scale / rotate
- Pipeline cost
- Composite only
- Use for motion?
- Yes - the default tool
- Property
- opacity
- Pipeline cost
- Composite only
- Use for motion?
- Yes - fades, reveals
- Property
- top / left / margin
- Pipeline cost
- Layout → paint → composite
- Use for motion?
- No - causes reflow every frame
- Property
- width / height
- Pipeline cost
- Layout → paint → composite
- Use for motion?
- No - animate scale instead
- Property
- box-shadow / background
- Pipeline cost
- Paint → composite
- Use for motion?
- Avoid - paint cost adds up
- Property
- color / filter
- Pipeline cost
- Paint (filter can promote)
- Use for motion?
- Sparingly
| Property | Pipeline cost | Use for motion? |
|---|---|---|
| transform: translate / scale / rotate | Composite only | Yes - the default tool |
| opacity | Composite only | Yes - fades, reveals |
| top / left / margin | Layout → paint → composite | No - causes reflow every frame |
| width / height | Layout → paint → composite | No - animate scale instead |
| box-shadow / background | Paint → composite | Avoid - paint cost adds up |
| color / filter | Paint (filter can promote) | Sparingly |
If a property changes geometry, the browser must re-measure the page. Transform and opacity never do.
The translate-don't-move rule
To slide a panel in, you almost never set left. You set transform: translateX(...). To grow a card, you do not animate width - you scale it and correct the children or you use FLIP. The visual result looks identical; the frame cost is not.