animation-performance
Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS anim
Try your first task
A source-grounded starter task has not been verified for this skill yet.
Inside SKILL.md
222 linesSection content has not been verified for this skill yet.
Full source remains withheld under the current source-display policy. Read the author’s source ↗