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.