The button effect
On iPhones, when you press a physical button, you'll see a slight darkening effect on the screen around it.
Design Examples
UI Animation Examples: Motion in Real Apps
See how companies like Reddit, Up Bank, Notion and Apple use motion, with UX Bites showing how small animations guide gestures, reward actions and reflect input.
Real world examples:
Updated: 23/09/2026, view all 1,490 examples
Examples on Built for Mars include
Reddit's mascot shows how far to swipe
Up Bank animates savings to prompt deposits
JustFit's stick figure mirrors slider input
Apple's haptic trailers
Apple's haptic trailers will vibrate the phone in-sync to key moments in a trailer (like the roar of an F1 engine).
Animated emojis
As you select how you feel, the face will animate to represent that emotion.
Pros have dual screens
The learn-to-code app Mimo will show dynamic onboarding animations, based on your skill level.
Swipe to sprint
As you swipe to refresh the Reddit app, the mascot will move into a ready position, and then start running.
Animating your savings
Subscribe to unlock this example
Plans start from £8 per month
Animated stick man
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 an animation replace a loading spinner in a useful way?
An animation that moves through distinct stages can show progress through a gesture, not just that something is loading. For example, Reddit's mascot moves from a ready pose to running as you swipe, so the change in pose tells you when you've swiped far enough to refresh.
Why would an animation make people repeat an action?
When the animation reacts to what you've done, people become curious about how it will respond next time. Up Bank shows dots pouring in and forming waves as savings grow, which gives users a reason to deposit again just to watch it happen.
Is a mood tracker a good place for animated feedback?
Yes, because the animation confirms the app is responding to each selection. For instance, 5 Minute Journal animates a face to match the emotion you pick on its slider. Adding motivational messages underneath, or reminders that not every day has to be good, is a possible next step for low-mood answers.
How should an AI feature use animation while it's working?
An icon that changes with the task makes the system feel alive and busy. Notion's AI icon animates differently for writing, thinking or checking, which leans on the Labour Illusion, where visible effort makes the output feel more valuable.
Do subtle animations matter if users don't consciously notice them?
They still build immersion. As an example, iPhones slightly darken the screen next to a physical button when it's pressed, reinforcing the sense that hardware and software are one connected object.
Can motion go beyond the screen?
Haptics can extend motion into something users feel. Apple's haptic trailers vibrate the phone in sync with key moments, e.g., the roar of an F1 engine, creating a novel moment people want to share.