fixing-motion-performance

Diagnose and resolve UI animation performance issues across CSS properties.

567|82|Updated Mar 15, 2026

Search Tags:#ui #performance #optimization #javascript #css #animation

Ready to run

npx skills add https://github.com/pedronauck/skills --skill fixing-motion-performance-pedronauck

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fixing-motion-performance
Source: https://github.com/pedronauck/skills/tree/main/skills/fixing-motion-performance
Command: npx skills add https://github.com/pedronauck/skills --skill fixing-motion-performance-pedronauck

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses janky or slow UI animations, ensuring smooth and responsive user experiences by diagnosing and fixing performance bottlenecks.

Core Features & Use Cases

Performance Diagnosis: Identifies specific animation issues like layout thrashing, excessive repainting, or inefficient rendering.
Targeted Fixes: Provides concrete code-level suggestions to optimize animations using transforms, opacity, and efficient rendering techniques.
Use Case: When UI animations feel sluggish, use this Skill to pinpoint the exact cause and receive actionable advice to make them fluid.

Quick Start

Review the file 'animation.js' for performance issues using the fixing-motion-performance skill.

Frequently Asked Questions about fixing-motion-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

Why does my UI animation feel janky and how can I diagnose the rendering bottleneck?▼

UI animation feels janky due to layout thrashing, excessive repainting, or inefficient rendering. Diagnose these bottlenecks by reviewing your code to identify inefficient DOM read/write interleaving and non-composited properties causing slow frames.

What's the best way to optimize scroll-linked effects for smooth performance?▼

Optimize scroll-linked effects by enforcing best practices for animation mechanisms and efficient property usage. Focus on minimizing layout and paint steps in the rendering pipeline, ensuring DOM reads and writes are strictly separated to prevent scroll jank.

How do I fix layout thrashing when animating elements with JavaScript and CSS?▼

Fix layout thrashing by enforcing strict rules regarding DOM reads and writes. Batch your DOM read operations before performing any write operations to prevent the browser from repeatedly recalculating layouts and triggering excessive repaints during the animation frame.

Which CSS properties should I animate to achieve fluid 60fps UI animations?▼

Achieve fluid UI animations by using CSS properties that bypass layout and paint steps, focusing on the composite stage. Targeted fixes prioritize animating transforms and opacity, which the browser can handle efficiently without triggering expensive rendering pipeline recalculations.

Does this approach work with any JavaScript animation library or only specific frameworks?▼

Yes, this approach diagnoses and resolves animation performance issues across various libraries. It targets the fundamental browser rendering steps—layout, paint, and composite—ensuring smooth performance regardless of the specific JavaScript or CSS animation library used.

When should I avoid using CSS properties that trigger layout during animations?▼

Avoid animating properties that trigger layout when you need smooth, responsive UI animations. Animating properties like width or height forces the browser to recalculate the entire document flow, causing performance bottlenecks; use composite properties like transforms instead.