Built with LottieFiles
Interactive Multi-Card Wallet Animation
Dayo Oyinlola
Interactive Multi-Card Wallet Animation
This project explores how interactive motion design can make fintech user interfaces feel more intuitive and human.
The concept centers on a digital wallet that brings together multiple payment cards — Visa, Stripe, and Discover — into a single, easy-to-manage interface.
I designed and animated this using Illustrator, After Effects, Lottie Creator, and LottieFiles State Machines, focusing on small, meaningful interactions that enhance the user experience.
Animation Flow
Idle State:
All three cards (Visa, Stripe, and Discover) gently move along the y-axis in a looping animation. This subtle motion gives the interface a sense of life and depth.
The text below shows the Total Wallet Balance, representing the combined balance of all cards.
Hover Interaction:
When a user hovers over a card — say, Visa — that card moves upward, drawing attention to it.
The wallet balance then updates dynamically to show only the balance for that card.
Hover Out:
When the user moves the cursor away, the card returns to its position, and the wallet balance resets to the total.
These transitions are powered by LottieFiles State Machines, allowing seamless interaction logic directly in the animation without coding.
Results
Though this was a concept piece, it highlights how microinteractions can improve engagement and usability in financial apps.
The final size of the animation, with its interaction, in dotLottie format is 21KB. You can interact with the animation with the link below:
You can get the animation and its resources here.
Key Takeaway
This project demonstrates that animation isn’t just decoration — it’s a form of communication.
Even simple movements, when intentional, can make complex interfaces feel more natural, intuitive, and enjoyable to use.
Full Animation Process Breakdown
Like this project
Posted Oct 22, 2025
Designed an interactive digital wallet animation for fintech UI using Illustrator, After Effects, and LottieFiles.
Likes
2
Views
0
Timeline
Oct 20, 2025 - Oct 22, 2025
