Your monthly balance
While swiping between months in your Revolut transaction history, the value ticks up and down with an animation.
Design Examples
UI Animation Examples: Motion in Real Apps
See how Revolut, Reddit, Shop and more use UI animation to guide, explain and reward, with annotated examples including rolling balances and pull-to-refresh cues.
Real world examples:
Updated: 26/10/2026, view all 1,503 examples
Examples on Built for Mars include
Revolut rolls digits to flag balance changes
Reddit's mascot shows how far to pull
Shop animates items to reveal the cart tab
Swipe to sprint
As you swipe to refresh the Reddit app, the mascot will move into a ready position, and then start running.
Adding to your list
When adding a recipe to your CookShelf list, you tap a bowl icon that literally opens its lid to add the recipe.
Run stick man, run
While waiting for Fitness+ to personalise your workout recommendations, the loading animation shows a stick figure running across the screen.
Casting a shadow
As your Uber Eats driver moves along the map, they cast a shadow on the ground.
Animating Pokemon cards
Subscribe to unlock this example
Plans start from £8 per month
Animating your savings
Subscribe to unlock this example
Plans start from £8 per month
There are more than 1400 UX Bites like this
Subscribe to BFM+
If features can be coded in minutes, thoughtful design is what wins
- Unlock the entire library
- Create custom UX courses
- Access our AI tools
£8/monthbilled annually
or, wait for the free stuff
Join the free newsletter
Get the free content when it's released, straight to your inbox, no account required
"An exceptional resource for learning how to build habit-forming products that people love."
"I’d never met anybody who looks at usability and UX the way I do until I met Peter. Only he’s smarter."
"The completest view of the psychological underpinnings of human behaviour that I’ve ever seen."
"What a nice idea! Christopher Alexander would be proud to see patterns collected like this."
FAQs
How can animation replace onboarding copy?
Motion can show where something lives or what an action did, without a single line of text. For example, Shop animates the product thumbnail into the cart tab in the bottom navigation, so people learn where the basket is the moment they add an item. CookShelf does something similar, opening a pot lid when you save a recipe so the animation explains the action.
When is it worth animating a number instead of swapping it instantly?
It helps when values can jump by large amounts and the change itself needs to be noticed. An instant swap is easy to miss, whereas rolling digits pull the eye to the fact that the figure is different. Revolut adds haptic feedback as you swipe between months, which makes browsing transaction history feel more physical.
What makes a loading animation more useful than a spinner?
It can communicate progress or state, not just that something is happening. For instance, Apple Fitness+ shows a stick figure shifting from walking to running while recommendations are personalised, and offers an Explore button so people can browse instead of waiting. Reddit's mascot moves from a ready pose to running, which signals when the pull is far enough to refresh.
Can a satisfying animation change how people behave?
It can encourage people to repeat an action just to see the animation again. As an example, Up Bank shows dots pouring into a savings pile and making waves on each deposit, which makes saving feel rewarding and gives people a reason to add more and watch how the pile reacts.
How does motion make flat UI elements feel physical?
Small real-world details such as shadows, depth and rotation make interface objects feel tangible. For example, the Uber Eats courier on the tracking map is a 3D rider illustration that casts a shadow, and the Pokemon card library lifts a selected card and rotates it in 3D so collectors can inspect both sides as if holding it.