Universal Elements

Universal Element Animation Principles

Apply Disney's 12 principles to any UI element for consistent, professional motion design.

Universal Application of Principles

1. Squash & Stretch

Any element that responds to interaction can squash (compress on impact/press) and stretch (extend on release). Keep it subtle: 2-5% maximum for UI.

2. Anticipation

Before any significant action, a brief preparatory motion signals what's coming. Scale down before scale up, pull back before push forward. 50-100ms duration.

3. Staging

Direct attention to the most important element. Use contrast in motion, size, color, z-index, and blur to create clear visual hierarchy.

4. Straight Ahead & Pose to Pose

Pose-to-pose for most UI: define start and end states clearly. Straight-ahead for organic, flowing animations like particles or organic shapes.

5. Follow Through & Overlapping Action

Nothing stops all at once. Child elements lag behind parents. Shadows settle after objects. Stagger related elements 20-50ms apart.

6. Ease In & Ease Out

The golden rule: never use linear for UI motion. Enter with ease-out, exit with ease-in, transition with ease-in-out.

7. Arcs

Natural motion follows curved paths. Add subtle vertical movement to horizontal transitions. Rotate while translating. Avoid robotic straight lines.

8. Secondary Action

Every primary action deserves supporting animation. Shadow changes, color shifts, icon rotations, glow effects reinforce without competing.

9. Timing

10. Exaggeration

Match animation intensity to context. Celebratory moments allow 20-30% exaggeration. Professional contexts keep it under 10%. Error states can be more dramatic.

11. Solid Drawing

Maintain visual consistency: border-radius ratios, shadow directions, spacing rhythms, typography scale. Nothing should distort or break during animation.

12. Appeal

The goal is delight without distraction. Smooth animations build trust. Snappy feedback feels responsive. The best animation is felt, not noticed.

CSS Foundation

/* Universal transition base */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Standard durations as custom properties */
:root {
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Apply to any interactive element */
.interactive {
  transition: transform var(--duration-normal) var(--ease-standard),
              opacity var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}

Key Properties (Any Element)

• transform: universal positioning and scaling
• opacity: visibility transitions
• transition: state changes
• animation: complex sequences
• box-shadow: depth and emphasis