Performance Optimization

When your animations are janky or dropping frames, this walks you through diagnosing the bottleneck and fixing it. It maps common performance issues to Disney's 12 animation principles, which is an interesting lens but really it's about the practical stuff: switching from expensive properties like top and left to transform and opacity, staggering animations to reduce concurrent load, and using Intersection Observer to pause offscreen work. The troubleshooting checklist is solid, covering DevTools profiling and device testing. Best for when you've got smooth animations on your dev machine but they stutter on actual devices or lower-end hardware.

skills.sh installs: 562
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill performance-optimization --agent claude-code

Installs into .claude/skills of the current project.

Files

Performance Optimization

Diagnose and fix slow or janky animations using Disney's 12 principles.

Problem Indicators

Frame rate drops below 60fps
Stuttering or choppy motion
UI feels sluggish
Battery drain on mobile
Layout thrashing

Diagnosis by Principle

Straight Ahead vs Pose-to-Pose

Issue: Calculating every frame in real-time Fix: Use pose-to-pose (keyframe) animation. Let the browser interpolate between states using CSS transitions or will-change.

Timing

Issue: Too many simultaneous animations Fix: Stagger animations. Offset start times by 50-100ms to reduce concurrent calculations.

Secondary Action

Issue: Too many secondary effects Fix: Remove non-essential secondary animations on low-power devices. Use prefers-reduced-motion query.

Solid Drawing

Issue: Animating expensive properties (width, height, top, left) Fix: Only animate transform and opacity. These are GPU-accelerated and skip layout/paint.