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
| Element | Duration | Easing |
|---|---|---|
| Entrance | 200-300ms | ease-out |
| Impact | 100-150ms | ease-out |
| Settle | 150-200ms | ease-out |
| Transition | 250-350ms | ease-in-out |
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