fixing-motion-performance

Fix animation jank by auditing CSS and JavaScript for layout thrashing and continuous paint work. This Skill provides prioritized diagnostics, exact snippet citations, and concrete code-level fixes to eliminate dropped frames and ensure smooth UIs.

Scroll-linked animations cause heavy paint work when they continuously poll scroll positions or animate layout properties. This Skill identifies these exact violations and converts them to performant transform/opacity or ScrollTimeline-based implementations.

Stop layout thrashing in requestAnimationFrame loops by separating interleaved layout reads and writes. This Skill audits your code for these violations and provides concrete fixes to batch DOM measurements and prevent forced synchronous layouts.

Yes, this approach works with existing JavaScript animation libraries by preserving your current animation system. It applies to WAAPI, requestAnimationFrame patterns, and common libraries to deliver code-level fixes without requiring a complete rewrite.

The best way to optimize CSS transitions is animating only transform and opacity properties to avoid layout and paint work. This Skill audits your CSS and applies FLIP techniques or will-change guidance to maintain smooth rendering.