Icon & Badge Animation Principles

Apply Disney's 12 principles to small UI elements for personality and meaningful feedback.

Principles Applied to Icons

1. Squash & Stretch

Heart icons can squash/stretch on "like" tap. Notification badges can bounce with squash on arrival. Adds life to small elements.

2. Anticipation

Before icon action, brief scale down (0.9) for 50ms. Bell can tilt back before ringing forward. Prepares for action.

3. Staging

Active/important icons should be visually prominent: color, size, or animation. Badges use contrasting colors to stand out.

4. Straight Ahead & Pose to Pose

Simple icons use pose-to-pose (two states). Complex icon animations (morphing) can use straight-ahead for organic transitions.