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
A property that changes geometry makes the browser 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 and 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 and 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 |
A property that changes geometry makes the browser re-measure the page; transform and opacity never do. To slide a panel, set `transform: translateX(...)` instead of `left`. The visual result looks identical; the frame cost is not.
Learn more
Optional practice
Test yourself on Animate on the compositor, not the main thread
QYou need to animate a sidebar panel growing from 240px to 320px wide. What is the frame-cheap approach and why?