fixing-motion-performance

Enforce transform and opacity constraints to avoid layout thrashing in UI animations.

Updated Feb 10, 2026

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

Ready to run

npx skills add https://github.com/ihj04982/my-cursor-settings --skill fixing-motion-performance-ihj04982

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses and resolves animation performance issues in user interfaces, ensuring smooth and jank-free motion without causing layout thrashing.

Core Features & Use Cases

Performance Auditing: Analyzes UI animations for performance bottlenecks.
Constraint Application: Enforces best practices for animation (transform/opacity, avoiding layout thrashing).
Use Case: When implementing a new UI transition, use this Skill to review the animation code and ensure it adheres to performance best practices, preventing jank.

Quick Start

Review the file '/path/to/animation.js' for motion performance violations.

Frequently Asked Questions about fixing-motion-performance

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

FAQPage Schema

How do I fix UI animation jank and layout thrashing in JavaScript?▼

To fix UI animation jank, you must avoid layout thrashing by enforcing constraints on transform and opacity properties, ensuring smooth rendering without triggering costly recalculations during motion sequences.

Why does my CSS animation cause layout thrashing and drop frames?▼

Your CSS animation causes layout thrashing because it animates non-composited properties. Optimizing animation performance requires restricting motion to transform and opacity to prevent frame drops and ensure smooth transitions.

Does this animation optimization approach work with GSAP and WAAPI?▼

Yes, this animation optimization approach works with GSAP, WAAPI, CSS, Motion, and requestAnimationFrame, applying rendering constraints across various interaction and transition scenarios to eliminate jank.

What is the best way to optimize requestAnimationFrame performance for UI transitions?▼

The best way to optimize requestAnimationFrame performance is enforcing rendering step priorities, categorizing optimizations by impact, and restricting property changes to transform and opacity for critical transitions.

Can I audit existing UI transition code for motion performance violations?▼

Yes, you can audit existing UI transition code by analyzing the animation logic for performance bottlenecks, identifying violations of rendering constraints, and applying best practices to prevent jank.

When should I not use transform and opacity for UI animation optimization?▼

You should carefully review constraints when UI animations require non-transform or opacity property changes, as deviating from these composited properties risks layout thrashing and degraded performance.