# Animate Transform Instead of Layout Properties

> Performance tip to keep web animations smooth by avoiding layout recalculations

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 is 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](https://xiry.app/topics/development.md)
- 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](https://x.com/jakubkrehel/status/2113292054151270727): 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

- [Anime.js](https://xiry.app/resources/anime-js): Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements (Website, Open source)
- [Animating height: auto in CSS](https://xiry.app/resources/animating-height-auto-in-css): Modern CSS technique for smooth height transitions without fixed pixel heights (Tip, Free)
- [CSS Card Parallax with Pointermove and Custom Properties](https://xiry.app/resources/css-card-parallax-with-pointermove-and-custom-properties): CSS recipe for interactive 3D card tilt and 2D layer parallax (Tip, Free)
- [Light/dark mode favicons via media attribute](https://xiry.app/resources/light-dark-mode-favicons-via-media-attribute): HTML technique to switch browser favicons based on system color scheme (Tip, Free)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [Transitions.dev](https://xiry.app/resources/transitions-dev): Curated library of copy-paste web app micro-interactions and transitions (Web app, Freemium)

Updated 24 October 2026. Page: https://xiry.app/resources/animate-transform-instead-of-layout-properties

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.