On this page
Motion is the easiest thing to add and the hardest thing to justify. We run every animation through the same three questions before it ships.
Does it explain?
The best animations teach: where a panel came from, what a swipe will do, how yield accrues. If an animation makes a mechanism legible, it has earned its place.
Does it guide?
Motion directs attention. A state change that animates tells the user their action worked; a list that staggers tells them where to start reading.
Does it delight — once?
A moment of charm is worth it the first time and irritating the fiftieth. Delight belongs in rare moments: onboarding, empty states, a successful payment.
The durations we default to
120ms for state feedback, 240–320ms for transitions, 600ms+ only for storytelling. Ease-out for things entering, ease-in for things leaving.
Working on something like this? Tell us about it — we answer within a day.
Share
