Fintech Banking
A solid reference for animation timing in financial interfaces. It maps Disney's 12 principles to money stuff like transaction flows, balance updates, and card flips, with specific durations (250-350ms for standard actions, 400-500ms for security verification). The core insight is restraint: fintech animations need to feel deliberate and trustworthy, not playful. You get concrete guidance on easing curves, sequencing (balance first, then cards, then transactions), and when to ease off the squash and stretch. Most useful when you're trying to make payment flows feel premium without looking gimmicky or making users nervous about their money.
- skills.sh installs
- 581
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill fintech-banking --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Categories
- Design & UI/UX, Finance & Trading
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Icons Badges581
- Staging Mastery581
- Gesture Responses579
- Arc Mastery578
- Follow Through Overlapping578
- Gaming Entertainment578
- Appeal Mastery577
- Accessibility Advocate576
- Anticipation Mastery575
- Entrance Animations572
- Modals Dialogs572
- Slow In Out Mastery572
- Spatial Thinking572
- Ux Researcher571
- Excitement Energy570
- Anticipation Payoff568
- Calm Relaxation566
- Joy Delight566
- Attention Grabbers565
- Brand Consistency565
- Timing Principle Mastery565
- Micro 100 200ms564
- Exaggeration Mastery562
- Performance Optimization562
Recommended
More Design & UI/UX
gaming-entertainmentdylantarre/animation-principlesUse when designing animations for gaming apps, streaming platforms, entertainment portals, or interactive media578skills.sh installsmodals-dialogsdylantarre/animation-principlesUse when animating modals, dialogs, popovers, or overlay content to create smooth entrances and exits572skills.sh installsexcitement-energydylantarre/animation-principlesUse when creating animations that generate enthusiasm, build anticipation, or create high-energy experiences.570skills.sh installsjoy-delightdylantarre/animation-principlesUse when creating animations that evoke happiness, surprise, or delightful moments in the user experience.566skills.sh installsmicro-100-200msdylantarre/animation-principlesUse when building micro-interactions between 100-200ms - tooltips appearing, dropdown opens, small feedback animations that feel quick but perceptible564skills.sh installsperformance-optimizationdylantarre/animation-principlesUse when animation runs slow, janky, or causes frame drops562skills.sh installs