dylantarre/animation-principles/power-confidence

Power & Confidence Animation

Create animations that convey strength, authority, and commanding presence.

Emotional Goal

Power comes from deliberate, controlled, weighty motion. Confidence means animations that know exactly where they're going and arrive with certainty.

Disney Principles for Power

Squash & Stretch

Minimal stretch, impactful squash. Heavy objects don't stretch—they compress on impact (10-15%). Weight and solidity over flexibility.

Anticipation

Deliberate, confident preparation (100-200ms). Not hesitation—gathering power. Like a predator before striking.

Staging

Dominant positioning. Large scale, center stage. Powerful elements command attention through presence, not motion.

Straight Ahead Action

Avoid. Power requires intention and control. Every movement should be deliberate, not spontaneous.

Follow Through & Overlapping Action

Controlled deceleration. Heavy elements don't bounce—they settle with authority. Short, decisive follow-through.

Slow In & Slow Out

Strong ease-out with sudden stops. Fast acceleration, decisive landing. cubic-bezier(0.0, 0, 0.2, 1) for powerful arrivals.

Arc

Direct paths preferred. Power takes the straightest route. When arced, low and driving—like a charging bull.

Secondary Action

Impactful ripples or shockwaves. When power lands, the environment responds. Subtle screen shake, radiating force.

Timing

Medium-fast with decisive endpoints (150-300ms). Not rushed, not leisurely. Purposeful velocity.

Exaggeration

Moderate (15-25%). Amplify impact, not movement. The landing matters more than the journey.

Solid Drawing

Heavy, grounded forms. Strong geometric shapes. Stability and mass in every frame.

Appeal

Bold, angular design. High contrast. Dark, saturated colors. Commanding presence.

Timing Recommendations

CSS Easing

--power-strike: cubic-bezier(0.0, 0, 0.2, 1);
--power-land: cubic-bezier(0.16, 1, 0.3, 1);
--power-drive: cubic-bezier(0.25, 0.1, 0.25, 1);

Impact Animation

@keyframes power-land {
  0% {
    transform: translateY(-20px) scale(1.05);
    opacity: 0;
  }
  60% {
    transform: translateY(2px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

Weight Simulation

• Larger elements animate slower
• Powerful elements affect surroundings
• Impacts create brief compression
• Recovery is quick and controlled

When to Use

• Hero sections and headlines
• Premium product showcases
• Brand statements
• Achievement displays
• Dashboard key metrics
• Executive presentations
• Automotive and luxury brands
• Sports and fitness apps