skills.rest
taxmaxi
taxmaxiOFFICIAL
Explore all skills by this author →
Website𝕏@TaxMaxiHQGitHub

animation-performance

Diagnose and fix dropped frames in web animations using compositor-friendly properties.

1|1|Updated May 11, 2026
Search Tags:#performance#css#animation#web#framer-motion#transform#60fps
One-click install
npx skills add https://github.com/taxmaxi/taxmaxi --skill animation-performance-taxmaxi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-performance
Source: https://github.com/taxmaxi/taxmaxi/tree/main/.codex/skills/animation-performance
Command: npx skills add https://github.com/taxmaxi/taxmaxi --skill animation-performance-taxmaxi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web animations drop frames and feel janky when they animate layout-triggering properties, run on a busy main thread, or re-render React components every frame, and the root cause is often invisible on a fast development machine. ## Core Features & Use Cases - Property tier guidance: Explains which CSS properties are composite-only (transform, opacity), paint-triggering (box-shadow, border-radius), or layout-triggering (width, margin), with concrete swap-down substitutions. - Thread and acceleration analysis: Covers when CSS, WAAPI, and rAF-driven libraries like Framer Motion can be hardware-accelerated, including the CSS-variable trap behind Motion's x/y shorthands. - Diagnostic checklist: Provides an ordered seven-step workflow for diagnosing dropped frames, from property inspection to will-change usage and real-device profiling. - Use Case: A React dashboard's sidebar animation stutters during page navigation; use this Skill to identify the layout-property animation, move it to a CSS transform, and verify 60fps on a mid-range phone. ## Quick Start Ask the AI to review your janky animation code and explain which properties to change so it holds 60fps.

Frequently Asked Questions about animation-performance

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

FAQPage Schema
How do I fix janky CSS animations that drop frames?▼

Animate only composite-only properties like transform and opacity instead of layout properties such as width, height, margin, or top. Replace padding-driven growth with scale(), margin-driven movement with translate(), and box-shadow with filter: drop-shadow().

Which CSS properties can be animated without triggering layout?▼

transform and opacity are composite-only and cheapest to animate. filter, clip-path, and background-color are also composited in current Chrome and Firefox, while box-shadow and border-radius trigger paint, and width, height, margin, and top trigger full layout recalculation.

Framer Motion vs CSS animations for performance?▼

CSS animations can be hardware-accelerated off the main thread, while Framer Motion's React components run on requestAnimationFrame and can be blocked when the main thread is busy. Use CSS for simple motion and anything running during page load; use Framer Motion for springs, gestures, and complex dynamic motion.

Why is my Framer Motion animation not hardware accelerated?▼

The x, y, scale, and rotate shorthand props are implemented with animated CSS variables, which are not accelerated. Use the string form animate={{ transform: "translateX(100px)" }} instead to get hardware acceleration.

Why does my transform animation get slower as content grows?▼

An inherited CSS variable updated every frame triggers style recalculation for every descendant element, so cost scales with content size. Set the transform directly on the element instead of writing positions to a CSS variable.

When should I use will-change in CSS?▼

Add will-change: transform only after you actually observe a visible shift or dropped frames, since browsers already promote transform and opacity animations to their own layer. Overusing it wastes GPU memory, so target only the elements that animate.

Related Skills

Explore More Software Engineering Skills→
Jatinkrmahato993203Jatinkrmahato993203

improve-animations

Audit codebase animation code and generate self-contained implementation plans for motion fixes.

Community
Advanced
duylinhdang1998duylinhdang1998

performance-optimization

Diagnose and fix web and mobile performance issues using Lighthouse and Chrome DevTools.

Community
Advanced
JupiterTheWarlockJupiterTheWarlock

animate

Plan and implement UI animations within accessibility and performance constraints.

Community
Advanced
wpsadiwpsadi

fixing-motion-performance

Audit and fix animation performance issues in web UIs.

Community
Advanced