fixing-motion-performance

Layout thrashing is fixed by batching all DOM reads before writes and animating transform instead of layout properties. The FLIP pattern measures the element's position once, applies the change, then animates the delta via transform so no continuous layout occurs.

Transform and opacity are the safe defaults because they run on the compositor without triggering layout or paint. Animating width, height, position, filters, or gradients forces layout or paint work and is acceptable only on small, isolated surfaces.

Use CSS Scroll or View Timelines (animation-timeline: view()) instead of listening to scroll events or polling scrollTop. Pair this with IntersectionObserver to pause off-screen animations so they consume no frame budget.

Yes, the rules apply within whatever animation system the code already uses, including GSAP, Motion, WAAPI, and rAF. It explicitly does not migrate or rewrite animation libraries unless requested, and never mixes APIs within one component.

Blur is a paint-heavy filter that must be recomputed every frame, so continuous blur animation stalls the main thread. Keep blur under 8px, use it only for short one-time effects on small surfaces, and prefer opacity or translate instead.

Use will-change temporarily and surgically, only around the actual animation window, since compositor motion requires layer promotion that is never automatic. Avoid promoting many or large layers, and validate layer behavior with browser tooling when performance matters.