fintech-banking

What this skill does

# Fintech & Banking Animation Principles

Apply Disney's 12 principles to create trustworthy, secure-feeling experiences that handle money with appropriate gravitas.

## The 12 Principles Applied

### 1. Squash & Stretch
- **Restrained Use**: Money is serious, avoid playful squash
- **Number Counters**: Subtle stretch as values update
- **Card Flip**: Slight flex when revealing card details

### 2. Anticipation
- **Transaction Submit**: Brief pause before processing
- **Balance Updates**: Moment of preparation before reveal
- **Security Checks**: Visual preparation for verification steps

### 3. Staging
- **Balance First**: Account balance is hero element
- **Transaction Flow**: Clear focus on current step
- **Security Badges**: Prominent but not distracting

### 4. Straight Ahead & Pose to Pose
- **Money Transfers**: Clear step-by-step (pose to pose)
- **Live Prices**: Continuous smooth updates (straight ahead)
- **Transaction History**: Sequential reveal on scroll

### 5. Follow Through & Overlapping Action
- **Payment Success**: Checkmark lands, then amount confirms
- **Dashboard Load**: Balance first, then cards, then transactions
- **Charts**: Axis appears, then data animates in

### 6. Slow In & Slow Out
- **All Financial Actions**: Smooth, deliberate easing
- **Card Animations**: Premium feel with ease-in-out
- **Modal Transitions**: Confident 300-400ms movements

### 7. Arc
- **Money Flow**: Visualize transfers with curved paths
- **Spending Charts**: Smooth arcs in pie/donut charts
- **Card Selection**: Arc motion between cards

### 8. Secondary Action
- **Transfer Success**: Subtle checkmark while balance updates
- **Bill Paid**: Confetti-lite while confirmation appears
- **Investment Gain**: Green glow during number update

### 9. Timing
- **Standard Actions**: 250-350ms for confident feel
- **Security Verification**: Deliberate 400-500ms
- **Quick Feedback**: 150ms for input validation

### 10. Exaggeration
- **Very Minimal**: Financial data requires accuracy
- **Success Moments**: Slight emphasis on positive outcomes
- **Fraud Alerts**: Appropriate urgency, not alarm

### 11. Solid Drawing
- **Number Legibility**: Clear typography at all sizes
- **Card Realism**: Proper perspective and shadows
- **Chart Accuracy**: Data visualization must be precise

### 12. Appeal
- **Premium Feel**: Smooth, Apple Pay-like refinement
- **Trust Through Restraint**: Less is more
- **Professional Personality**: Confident, not playful

## Industry Timing Standards

| Action | Duration | Easing |
|--------|----------|--------|
| Button Feedback | 150ms | ease-out |
| Card Flip | 400ms | ease-in-out |
| Transfer Step | 300ms | ease-in-out |
| Balance Update | 250ms | ease-out |
| Modal Open | 350ms | ease-out |

## Key Principle
Every animation should reinforce trust and security. Users are entrusting you with their money - motion should feel deliberate, accurate, and premium.