fixing-motion-performance

Janky animations usually come from animating layout or paint properties instead of transform and opacity. Review the code against rules that flag layout thrashing, scroll-event-driven motion, and paint-heavy properties, then switch to compositor-friendly transforms.

Transform and opacity are the safest properties because they only require compositing. Animating layout properties like width or position, or paint properties like gradients and filters, triggers expensive rendering work and should be limited to small, isolated surfaces.

Use Scroll or View Timelines when available, and IntersectionObserver for visibility detection and pausing off-screen animations. Avoid polling scrollTop or scrollY in scroll events, which forces continuous layout or paint work.

Yes, the rules apply within your existing animation stack including CSS, WAAPI, Motion, rAF, and GSAP. It does not migrate or rewrite animation libraries, and it avoids mixing multiple animation systems that each measure or mutate layout.

Avoid animating blur continuously or on large surfaces, and keep blur values at 8px or below for short one-time effects. Prefer opacity and translate before reaching for blur, since filter animation triggers expensive paint work.