Loading
Design Examples
Animations
How animation carries meaning in real products, with examples from Notion's AI icon, Amie's event previews, Apple's airplane toggle and Gentler Streak's off switch.
Real world examples:
Updated: 21/08/2026, view all 1,446 examples
Examples on Built for Mars include
JustFit animates a stick man as you pick effort
Notion's AI icon animates as it 'thinks'
Gentler Streak lets people switch characters off
When selecting your activity level, an animated stick figure works out with increasing intensity.
In Gentler Streak, you can choose whether your character appears with seasonal themes, or turn them off entirely.
Go to UX BiteView#1419
When changing the default length of a calendar event, Amie shows a dynamic preview of that event using your current time.
More context
i.e., it's both dynamic for the current time of day, and updates to show the length of the event.
Notion's AI icon will animate based on the task it's doing (e.g., writing, thinking or checking).
As you answer questions, the Ahead ghost will animate to scribble on their clipboard.
There are more than 1400 UX Bites like this
See the benefits
There are more than 1400 UX Bites like this
See the benefits
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
£12 per 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
What does animation add to a simple form input?
It proves the app registered the choice, which makes a dull selection feel like a response. 5 Minute Journal animates a face to match the mood you drag towards, and JustFit's stick figure works out harder as the activity slider rises.
Why give people the option to switch animations off?
An off switch means the people who find characters annoying stay rather than churn, which frees you up to lean on animation harder for everyone else. Gentler Streak offers regular characters, seasonal themes, or none at all.
Can an animation do real work, rather than just decorate?
Amie previews a calendar event using your current time of day, so changing the default duration shows what a 15m block looks like next to a 50m one. Preply's onboarding globe reacts as you pick countries, so each input is visibly acknowledged.
Why do animated processing states feel faster to sit through?
They lean on the Labour Illusion — it looks like effort is being spent on you. Notion's AI icon shifts depending on whether it's writing, thinking or checking, and Ahead's ghost scribbles on a clipboard as you work through quiz questions.
Is there a case for animation with no function at all?
Apple animates the plane flying away when airplane mode is switched off, inside Control Center, changing nothing about how the toggle behaves. Details at that scale make an interface feel alive without adding steps.