fixing-motion-performance

Diagnose and correct UI animation performance issues in CSS, WAAPI, and JavaScript.

1|Updated Mar 27, 2026

Search Tags:#debugging #fix #transform #ui-animation #frame-rate #motion-performance

Ready to run

npx skills add https://github.com/leonanpereirapinto/ai-utils --skill fixing-motion-performance-leonanpereirapinto

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps identify and fix animation performance issues in UI code, improving frame rates and user experience.

Core Features & Use Cases

Performance diagnostics: identify jank causes in CSS, WAAPI, and JavaScript-driven animations.
Best-practice enforcement: apply transform/opacity-based motion, batch DOM reads before writes, and avoid layout thrashing.
Use Case: optimize a long-running scroll-linked animation to run smoothly on mobile devices.

Quick Start

Review the current motion code and propose minimal, concrete changes to restore smooth frame rate.

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 improve frame rate in web components?▼

Fix UI animation jank by diagnosing motion performance issues and applying best practices like using transform and opacity, batching DOM measurements, and avoiding layout thrashing to restore smooth frame rates.

What is the best way to optimize scroll-linked animations for mobile devices?▼

The best way to optimize scroll-linked animations is to enforce transform and opacity-based motion while batching DOM reads before writes, ensuring smooth frame rates on mobile devices without causing layout thrashing.

Can I use this approach to debug GSAP and WAAPI performance issues?▼

Yes, you can debug GSAP and WAAPI performance issues by diagnosing common motion problems and proposing minimal, concrete changes to correct JavaScript-driven transitions and interactive widgets.

Why does my JavaScript-driven transition cause layout thrashing?▼

JavaScript-driven transitions cause layout thrashing when DOM measurements and writes are interleaved; fixing motion performance requires batching DOM reads before writes to prevent recursive layout recalculations.

Does fixing motion performance require specific UI animation libraries?▼

Fixing motion performance does not require specific libraries; it applies to CSS, WAAPI, GSAP, and JavaScript-driven transitions across web components, scroll-linked effects, and interactive widgets.

When should I avoid animating properties other than transform and opacity?▼

Avoid animating properties other than transform and opacity whenever possible, as animating layout properties triggers expensive browser recalculations, whereas transform and opacity are composited for reliable motion performance.