How to implement 60fps animations without blocking the main thread.
Animations breathe life into an interface, but poorly implemented ones kill battery life and cause jank. The secret to buttery smooth 60fps motion is knowing what the browser can handle cheaply.
Composite-Only Properties
We stick religiously to `transform` and `opacity`. Changing properties like `width`, `height`, or `top` triggers layout recalculations (Reflow), which are expensive. Transforms, however, are handled by the GPU during the Composite step, bypassing the main thread completely.
The FLIP Technique
For layouts that *must* change size (like a shared element transition), we use the FLIP technique (First, Last, Invert, Play). We calculate the start and end states, then use a Transform to fake the movement. Libraries like Framer Motion handle this for us automatically, making complex layout animations performant by default.
Join our engineering newsletter
Get deep dives on architecture, design systems, and scaling strategies delivered to your inbox.
No spam. Unsubscribe anytime.
