fixing-motion-performance

Fix animation jank by auditing CSS and JavaScript animations to reduce layout thrashing and unnecessary paints. Apply rules that favor transform and opacity properties to enforce frame-rate stability and efficient compositing layers.

Scroll-linked motion stutters due to improper scroll reads triggering expensive paints. Optimize scroll animations by avoiding scroll-triggered reads and enforcing measurement rules that prevent layout thrashing during scrolling events.

Layout thrashing in JavaScript animations is caused by interleaving DOM read and write operations, forcing synchronous recalculations. Prevent it by batching DOM measurements separately from mutations to avoid expensive paints and UI jank.

Optimize CSS transitions by favoring transform and opacity properties to avoid expensive paints and large paint areas. Enforce measurement to identify compositing bottlenecks and ensure motion stays on the GPU compositor thread.

Yes, you can apply motion performance rules to both CSS and JavaScript-driven animations. The auditing process identifies inefficient motion across transitions and scroll-linked motion, reducing layout thrashing and jank universally.

Transform and opacity should not be used when animating layout properties is strictly required by the visual design. However, avoiding them reintroduces expensive paints and layout thrashing, causing UI jank and reducing battery efficiency.