skills.rest
swyxio
swyxioCOMMUNITY
Explore all skills by this author →
Website𝕏@swyxGitHub

web-animation-perf

Diagnose and fix layout thrash and jank in JavaScript-driven CSS animations.

154|9|Updated Mar 27, 2026
Search Tags:#GPU acceleration#web animation#frontend optimization#requestAnimationFrame#animation performance#CSS transitions#jank fix
One-click install
npx skills add https://github.com/swyxio/skills --skill web-animation-perf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-animation-perf
Source: https://github.com/swyxio/skills/tree/main/web-animation-perf
Command: npx skills add https://github.com/swyxio/skills --skill web-animation-perf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates frustrating jank, stutter, lag, and visual drift in web animations caused by common implementation mistakes, saving developers hours of debugging inconsistent motion behavior.

Core Features & Use Cases

  • Three Cardinal Rules Guidance: Clear, actionable rules to avoid the most common animation performance pitfalls, including conflicting CSS transitions with JS-driven updates, incorrect timer usage, and animating layout-heavy properties.
  • Diagnostic Workflow: A step-by-step process to narrow down the root cause of animation issues, with specific symptoms tied to each common culprit for fast troubleshooting.
  • Real-World Validation: Includes a case study of fixing a broken orbital diagram animation, plus guidance for using Playwright to measure rendered geometry and confirm fixes work as expected.
  • Use Cases: Ideal for debugging or building continuous motion effects like rotation, orbital movement, parallax, scroll-linked interactions, marquees, carousels, and any JS-driven CSS animation where smooth performance is required.

Quick Start

Use the web-animation-perf skill to debug and fix stuttering, drifting animation issues in your web application's continuous motion effects.

Frequently Asked Questions about web-animation-perf

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

FAQPage Schema
Why does my CSS animation stutter and drift toward the center of the motion path?▼

Animation drift and stutter usually occur when animating layout-heavy CSS properties or using conflicting CSS transitions alongside JavaScript updates. Fixing jank requires animating only compositor-friendly properties like transform and opacity to maintain smooth GPU acceleration.

How do I fix jank in JavaScript-driven web animations?▼

To fix web animation jank, enforce exclusive use of requestAnimationFrame for animation loops and animate only compositor-friendly transform and opacity properties. Avoid conflicting CSS transitions on properties updated via JavaScript per frame to prevent layout thrash and reflow.

What are the best CSS properties to animate for 60fps performance?▼

The best CSS properties for 60fps performance are transform and opacity. These compositor-friendly properties avoid layout thrash and reflow, enabling GPU acceleration for smooth motion in continuous effects like rotation, parallax, and carousels.

Can I use CSS transitions on properties updated by requestAnimationFrame?▼

No, you should avoid applying CSS transitions to properties updated via JavaScript per frame. Conflicting CSS transitions with requestAnimationFrame updates cause visual jank and inconsistent motion behavior in continuous animation loops.

How do I debug a stuttering parallax or carousel animation?▼

Debug stuttering parallax or carousel animations by following a diagnostic workflow to identify layout thrash, incorrect timer usage, or layout-heavy property animations. You can use Playwright to measure rendered geometry and confirm performance fixes work as expected.

Related Skills

Explore More Software Engineering Skills→
santanapolsantanapol

fixing-motion-performance

Fix CSS, WAAPI, Motion, rAF, or GSAP animation performance issues.

Community
Intermediate
MHD-Nour-KJMHD-Nour-KJ

flutter-animation-transition-performance

Optimize Flutter animations and transitions for consistent frame rates.

Community
Advanced
EmasoftEmasoft

amvcp-anim-perf

Controls infinite CSS animations and schedules initialization to reduce CPU waste.

Community
Advanced
Ritik-Sharma1Ritik-Sharma1

fixing-motion-performance

Audit and fix animation performance issues in CSS and JavaScript UI code.

Community
Advanced