fixing-motion-performance

Batch all DOM reads before writes and animate via transform instead of layout properties. Use the FLIP technique: measure the initial position, apply the change, measure again, then invert with a transform and animate to identity.

Use CSS Scroll or View Timelines (animation-timeline: view()) instead of scroll event listeners or polling scrollY. Pair with IntersectionObserver to pause off-screen animations and avoid triggering continuous layout or paint.

Transform and opacity are compositor-only properties and safe for continuous motion. Properties affecting layout (width, height, position) or paint (colors, gradients, filters) should only animate on small, isolated surfaces.

Yes, the rules apply within your existing animation stack including CSS, WAAPI, Motion, rAF, and GSAP. The Skill explicitly avoids migrating or rewriting animation libraries and never mixes multiple systems that each measure or mutate layout.

Blur is a paint-heavy filter that forces expensive re-rendering each frame. Keep blur animation under 8px, use it only for short one-time effects, never animate it continuously or on large surfaces, and prefer opacity and translate instead.

Avoid view transitions for interaction-heavy UI or when interruption and cancellation are required. Reserve them for navigation-level changes, and treat size changes within transitions as potentially layout-triggering.