fintech-banking

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.