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.
Subscribe to our newsletter
Get the latest insights on design, engineering, and digital strategy delivered to your inbox.
