38 / MOTION
Auto Animate
The problem
When items appear or disappear from a list without transition, it's hard to notice what changed.
The solution
Items fade and slide on enter and exit, and neighbours shift smoothly.
Experiment
Task: Add and remove items from the list.
NAIVE
DesignResearchFrontend
auto animateFALSE
count3
THOUGHTFUL
DesignResearchFrontend
auto animateTRUE
count3
Play with the values
250ms
How it works
Seen in
Todo lists
Completing or adding tasks animates so changes are easy to follow.
Notifications
Toasts stack and dismiss with graceful enter and exit.
Search results
Results animate in and out as the query changes.
Tag inputs
Chips appear and disappear smoothly as you edit.