home / skills / dylantarre / animation-principles / performance-optimization
This skill helps you diagnose and fix slow or janky animations by applying Disney's 12 principles for smoother UI performance.
npx playbooks add skill dylantarre/animation-principles --skill performance-optimizationReview the files below or copy the command above to add this skill to your agents.
---
name: performance-optimization
description: Use when animation runs slow, janky, or causes frame drops
---
# 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.
### Staging
**Issue**: Animating off-screen elements
**Fix**: Only animate what's visible. Use Intersection Observer to pause off-screen animations.
## Quick Fixes
1. **Replace JS animations with CSS** - Browser-optimized
2. **Use `transform` instead of position properties** - GPU layer
3. **Add `will-change` sparingly** - Hints to browser
4. **Reduce simultaneous animations** - Stagger or sequence
5. **Lower animation complexity on mobile** - Detect device capability
## Troubleshooting Checklist
- [ ] Check DevTools Performance tab for long frames
- [ ] Verify animations use transform/opacity only
- [ ] Count simultaneous animations (keep under 3-4)
- [ ] Test on lowest-spec target device
- [ ] Check for layout thrashing (forced reflows)
- [ ] Verify `will-change` isn't overused
- [ ] Test with CPU throttling enabled
- [ ] Check if animations pause when tab is hidden
## Code Pattern
```css
/* Fast */
.element {
will-change: transform;
transition: transform 200ms ease-out;
}
.element:hover {
transform: translateY(-4px);
}
/* Slow - avoid */
.element:hover {
top: -4px; /* Triggers layout */
}
```
This skill diagnoses and fixes slow, janky, or frame-dropping animations using practical techniques inspired by Disney's 12 principles of animation. It focuses on measurable performance outcomes: smoother frame rates, reduced CPU/GPU load, and better battery life on mobile. The goal is fast, energy-efficient motion without sacrificing storytelling or user experience.
The skill inspects animation patterns, identifies costly properties and concurrency issues, and recommends targeted fixes such as switching JS to CSS, using transform/opacity only, and applying pose-to-pose (keyframe) approaches. It uses a checklist-driven workflow: run performance traces, count simultaneous animations, detect layout thrashing, and test on constrained devices. Recommendations include code patterns and progressive degradation for low-power contexts.
Why are transform and opacity recommended?
They are composited by the GPU and avoid layout and paint passes, which makes them far cheaper to animate.
How many simultaneous animations are safe?
Keep concurrent heavy animations to about 3–4 or fewer; stagger start times by ~50–100ms to smooth CPU/GPU demand.