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

Replace JS animations with CSS - Browser-optimized
Use transform instead of position properties - GPU layer
Add will-change sparingly - Hints to browser
Reduce simultaneous animations - Stagger or sequence
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

/* Fast */
.element {
  will-change: transform;
  transition: transform 200ms ease-out;
}
.element:hover {
  transform: translateY(-4px);
}

/* Slow - avoid */
.element:hover {
  top: -4px; /* Triggers layout */
}

performance-optimization