home / skills / dylantarre / animation-principles / fintech-banking

fintech-banking skill

safe

This skill helps design banking app animations grounded in Disney principles to convey trust, security, and premium user experience.

npx playbooks add skill dylantarre/animation-principles --skill fintech-banking

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

3.0 KB

---
name: fintech-banking
description: Use when designing animations for banking apps, payment systems, investment platforms, or financial dashboards
---

# 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.

Overview

This skill guides designers and developers on applying Disney's 12 animation principles to fintech and banking interfaces. It focuses on creating motion that communicates trust, security, and premium quality while handling financial data with restraint and clarity. Use it to shape microinteractions, transitions, and data visualizations that support confident user decisions.

How this skill works

The skill translates each of the 12 principles into concrete rules and timings tailored for financial products. It recommends when to use subtle squash, anticipatory pauses, easing profiles, and arc motions so animations feel deliberate and accurate. It also provides industry-standard durations and easing suggestions for common banking actions to ensure consistency and perceived security.

When to use it

Designing transaction flows, balance updates, or payment confirmations
Animating dashboards, charts, or live price feeds where accuracy matters
Creating card interactions, modal transitions, and authentication steps
Polishing microfeedback like button states and input validation
Building onboarding that introduces secure habits without sensationalism

Best practices

Favor restraint: motion should reassure, not distract from numbers
Use deliberate timing: 250–350ms for actions, 400–500ms for security steps
Prioritize legibility and data accuracy over decorative motion
Layer secondary actions subtly to support primary feedback
Apply easing (ease-in-out, ease-out) for premium, confident feels

Example use cases

Balance update: brief anticipation, 250ms ease-out reveal of new amount
Money transfer: pose-to-pose step progression with curved transfer arc
Payment success: small checkmark animation followed by balance confirmation
Security verification: staged visual cues with 400–500ms deliberate timing
Live price feed: smooth straight-ahead updates with minimal stretch for emphasis

FAQ

How much motion is appropriate in a banking app?

Use minimal, purposeful motion that supports comprehension and trust; avoid playful exaggeration.

What easing should I use for confirmations?

Prefer ease-in-out for card flips and transfer steps, and ease-out for balance reveals and button feedback.