Agent Kit by AtlasScope

Command·Emil Kowalski skills·15 skills·UI069

/animation-performance

Fixes animation that stutters or drops frames. Covers properties the browser can animate cheaply, CSS vs JavaScript, and the will-change hint.

Example

/animation-performance the scroll reveal stutters

Motion, polish and frontend craft from Emil Kowalski. The review, find and improve skills only read and do not change code unless you ask.

Skip it when: Choosing a whole page's visual direction. Hallmark and Impeccable handle that.
Best for: Animation, polishing components, testing worst cases and choosing libraries.
Changes: Changes code
Notes: The first time you call most of these, they reply with one line and wait for your question.

Skills it uses

animation-performanceKeep 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 animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.design-kit·Emil Kowalski

More in Emil Kowalski skills.