fixing-motion-performance

Fix layout thrashing in web animations by batching DOM measurement reads separately from layout writes. This skill audits your code to identify interleaved read-write cycles and provides concrete fixes to eliminate scroll-linked stutter and jank.

Scroll-linked animations cause performance issues when they trigger continuous layout or paint updates instead of compositor-only properties. This skill analyzes large surface updates and applies scroll timeline rules to move work off the main thread.

Optimize CSS and WAAPI transitions by enforcing the use of transform and opacity properties to minimize paint and composition costs. This skill audits your motion guidelines and proposes code-level fixes to reduce rendering bottlenecks.

Yes, you can audit blur-related inefficiencies by providing your UI animation code for analysis. This skill identifies rendering bottlenecks caused by expensive blur filters during transitions and reveals on scroll, proposing concrete optimizations.

You should avoid layout reads during active animations to prevent forced synchronous layout and scroll jank. This skill enforces per-category constraints by detecting measurement reads inside animation frames and restructuring them into batched operations.