xiry.

Development · Tip

Animate Transform Instead of Layout Properties

Performance tip to keep web animations smooth by avoiding layout recalculations

From the Xiry library · Updated 24 October 2026

This frontend tip advises driving UI animations using CSS transform rather than layout properties like width, height, or left. Animating layout properties forces the browser to recalculate geometry on every frame, leading to dropped frames when the main thread is busy. Using transform offloads positioning to the compositor layer to maintain 60fps motion.

How it works

An animation performance tip:

Animate `transform` instead of layout properties like `width`, `height` or `left` when possible.

Why: layout properties trigger layout on every frame, so animations can stutter when the main thread is busy. `transform` skips layout and stays smooth.

The attached video contrasts two versions of the same Day / Week / Month segmented control whose thumb slides between options: one animates via a layout property and visibly lags/stutters behind the other, which animates via transform and stays in sync with the input.

What it's for

  • Prevent stuttering in sliding UI elements like segmented controls and tabs
  • Animate drawer, modal, and side-panel transitions smoothly
  • Optimize CSS and JavaScript animations on pages with heavy main-thread activity

Key points

  • Avoids layout thrashing by bypassing browser reflow calculations
  • Relies on GPU-accelerated compositing via CSS transform
  • Provides a drop-in architectural guideline for common UI motion patterns

Pricing

Free

Details

Type
Tip
Category
Development
Topic
Web Performance
Open source
No
Platforms
Web
For
Frontend developers and UI designers
Tags
css, animation, performance, webdev, frontend

Why it was saved

  • @jakubkrehel, 22 October 2026: Use it as a default rule when building animated UI — segmented controls, sliders, toggles, drawer and panel transitions — to keep motion at 60fps on busy pages.

Related

Updated