fixing-motion-performance

Batch all DOM reads before any writes so layout is computed once per frame. For layout-like movement, use the FLIP technique: measure the initial position, apply the change, measure again, then animate the difference with transform.

Use CSS scroll-timeline or view-timeline for scroll-linked motion instead of listening to scroll events or polling scrollY. Use IntersectionObserver to detect visibility and pause off-screen animations.

Transform and opacity are compositor-only properties and are the default safe choices. Animating layout properties like width or paint-heavy properties like filters forces expensive recalculation and should be limited to small, isolated surfaces.

Blur is a paint-heavy filter that must be recomputed every frame, making continuous blur animation expensive. 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 to promote an element to its own compositor layer before an animation. Avoid applying it broadly, since many or large promoted layers consume memory and can hurt performance.

No, the skill explicitly does not migrate or rewrite animation libraries unless requested. It applies performance rules within the existing animation system and avoids mixing APIs within the same component.