fixing-motion-performance

Janky animations usually come from animating layout or paint properties instead of transform and opacity. Review the component against the rule set, replace layout-driven motion with transforms, and batch any DOM measurement before writes.

Scroll-linked animations should use Scroll or View Timelines when available, or IntersectionObserver for visibility and pausing. Never poll scrollTop or scrollY in scroll events, and pause animations when elements leave the viewport.

Transform and opacity are the safe defaults because they run on the compositor without triggering layout or paint. Animating size, position, colors, gradients, or filters forces expensive rendering work and is acceptable only on small, isolated surfaces.

Yes, the rules apply within your existing animation system, whether CSS, WAAPI, Motion, rAF, or GSAP. The Skill does not migrate or rewrite libraries; it enforces performance constraints inside whichever stack the code already uses.

Blur is a paint-heavy filter that the browser must recompute 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 promoting many or large layers, and validate layer behavior with browser tooling since promotion is never automatic.