fixing-motion-performance

Janky animations usually come from animating layout or paint properties instead of compositor-friendly transform and opacity. Review the component for patterns like animating width, top, or filters, and replace them with transform and opacity transitions.

Layout thrashing happens when code interleaves DOM reads and writes in the same frame, forcing repeated reflows. Fix it by batching all reads before writes, or use FLIP-style transitions that measure once and animate via transform.

Use CSS Scroll or View Timelines such as animation-timeline: view() for scroll-linked motion, and IntersectionObserver for visibility detection and pausing. Polling scrollTop or scrollY in event handlers triggers continuous layout work.

Yes, the rules apply within whatever animation system the project already uses. The skill explicitly does not migrate or rewrite animation libraries and never mixes multiple animation systems within the same component.

Blur animation is acceptable only for short, one-time effects kept at 8px or below on small surfaces. Never animate blur continuously or on large containers; prefer opacity and translate as cheaper alternatives.

will-change promotes elements to compositor layers, which consumes memory and can hurt performance when overused. Apply it surgically around the animation window and validate layer behavior with browser tooling.