The test of an animation is not whether it looks good the first time. It is whether it still feels right the fortieth time, and those are almost opposite problems.
The first time, a person is watching the animation. By the fortieth they are trying to get somewhere, and the same movement that read as craft now reads as a wait. Almost every piece of motion I have had to remove was removed for that reason, and almost every one of them was approved in a review where everybody saw it exactly once.
Motion is an answer to a question the interface raised
The useful frame is not "should this be animated". It is "did something just happen that a person needs explaining".
When a panel appears from nowhere, there is a real question in the room: where did that come from, and is the thing I was reading still there behind it. Motion answers that by showing the relationship. The panel slides up from the button that summoned it, so the connection between the two is stated rather than assumed, and when it leaves it goes back where it came from.
That is the whole job. An element that fades in over 400 milliseconds, almost half a second, because fading is nice is not answering anything. It is a delay with a gradient on it.
The practical version of this test: if you can describe what the animation tells the user in one sentence that does not contain the word "polish", keep it. If you cannot, it is decoration, and decoration is the thing that stops being charming on the fortieth viewing.
The decisions, in the order that matters
Motion work goes wrong when the interesting decisions are made first. The order that has held up for me runs from the cheapest question to the most expensive one.
Should it move at all
Most things should not. A list that reorders itself, a value that changes, a panel that opens: those raised a question. A button that already tells you what it does when you look at it did not.
What actually moves
This is decided before anything about timing, because it decides whether the animation is cheap or expensive for the device. Sliding something along or fading it in and out is easy work for a phone. Changing its size, or pushing everything around it out of the way, makes the phone redo the layout of the whole page for every frame, and on an ordinary phone that is the difference between smooth movement and stutter. I have seen so many animations fixed by changing nothing but what moved that I now check it first.
How it speeds up and slows down
Entering, leaving, or moving while it stays on screen: each has its own answer.
How long
The numbers are in the next section, and they are smaller than they feel.
Doing it in this order means the two questions people enjoy arguing about, the speed curve and the timing, come last, when most of the candidates have already been eliminated.
Durations, and why the numbers are smaller than they feel
Designing an animation means watching it a hundred times, and a hundred viewings make everything feel too fast. This is the single most reliable source of slow interfaces: the person who chose the duration was the person least able to judge it.
The ranges that have survived contact with real products, for me:
Something small changing, a button lighting up under the pointer, a switch flipping: 100 to 150 milliseconds. Below about 80 it stops reading as motion and starts reading as a flicker, which is worse than an instant change.
Something appearing or leaving, a menu, a small label that pops up: 150 to 250 milliseconds.
Something large moving across the screen, a panel sliding up from the bottom, a whole screen changing: 250 to 400 milliseconds, and 400 is already generous.
Anything above roughly 400 milliseconds needs a reason that is not aesthetic. It is a wait, and the person is now waiting on your taste.
The correction for the hundred-viewings problem is to leave it overnight and come back. Almost every duration I have set has come down the next morning, and none has ever gone up.
Curves say who is in charge
Two ways of speeding up and slowing down, which designers call easings, cover nearly everything, and the choice between them is not a matter of feel.
Something entering should ease out: fast at the start, settling at the end. It arrives immediately, which is what a person asked for, and decelerates into place, which is what makes it feel like an object rather than a picture swapped for another.
Something leaving should ease in: slow at the start, accelerating away. The element hesitates for a moment, so the eye can confirm what is going, then goes quickly, because nobody is waiting to look at something that is disappearing.
Slowing down at both ends is the default in a lot of tools, and it is the right answer for something moving from one place to another while staying on screen. It is the wrong answer for entering and leaving, and it is the reason a lot of menus feel slightly reluctant.
Bouncy, spring-like movement is worth having, but for a narrower set of cases than their popularity suggests: something a person dragged, threw or is otherwise physically manipulating. A dropdown that bounces is telling a story about mass and momentum that nothing in the interaction supports.
Interruption is the actual test
Here is where most motion work is still unfinished when it ships. Every animation looks correct when it runs from start to finish in an empty room. What decides whether it feels good is what happens when someone does the next thing before it has finished, and people do that constantly.
Open a menu and close it halfway through the opening. Does it reverse from where it is, or does it snap to fully open and then play the close from the top? The second one is what you get for free, and it is the reason an interface can feel expensive on the first click and cheap on the third.
A highlight that animates when the pointer arrives but not when it leaves. Move the pointer quickly across a row of six cards and you get six things easing in and six things vanishing. It looks like a fault, and technically it is one.
A list that animates on reorder, given two reorders in quick succession. Either the second one interrupts cleanly or you get elements travelling to positions that no longer exist.
The rule I have ended up with: an animation is not finished until you have tried to interrupt it. Not as a check at the end, as part of building it, because the fix is usually structural rather than cosmetic and it is much cheaper before the thing is done.
Write the timings down once
Timings stay loose numbers far longer than colours do. A product where one thing settles over 200 milliseconds and the next over 320 feels off, and nobody in the review can say why, because no single screen is wrong.
Two or three timings and two easings, each with a name that says what it is for: something appearing, something moving, something leaving. Then "make the whole product feel a bit snappier" is one edit, for the same reason a well-named design system survives a rebrand.
Then make the named timings the only ones allowed. One-off timings do not look like a mistake the way an off-brand colour does, so nobody catches them in a review, and that is exactly why they pile up. An automatic check that refuses any timing not on the list takes an afternoon to set up and settles the question for good.
Reduced motion is a preference, not a switch to turn things off
Phones and computers have a setting to reduce motion. Most sites respond to it by switching all animation off, which is both the easy reading and the wrong one. The setting matters because large movement, and layers that slide past each other at different speeds, can make people with vestibular disorders, conditions of the inner ear that affect balance, dizzy or nauseous (opens in a new tab). It is not there because some people dislike transitions.
Stripping motion entirely takes away the thing the motion was doing. A panel that appeared with no transition at all still raises the question of where it came from, and now nothing answers it.
The better response is to keep the meaning and drop the movement: replace a slide with a quick fade, cut the distance travelled, remove parallax (a background that scrolls at a different speed from the content in front of it) and anything that grows or shrinks a lot. The relationship survives, the trigger does not. It also has a pleasant side effect, in that it forces you to articulate what each animation was actually communicating, and the ones where you cannot answer are the ones to delete for everybody.
What is left when the flourishes go
The motion I am still proud of, years later, is the motion nobody noticed. A menu that comes from its button. A row that settles rather than snaps when it moves. A value that counts rather than jumps, so the eye registers that it changed. None of it would survive being described in a portfolio.
The stuff that got cut was, without exception, the stuff that was fun to build. Staggered entrances on a list that people scroll past twenty times a day, delighted exactly once, tolerant for the next nineteen, resentful by day three. A page transition that added 300 milliseconds to every page change for a wipe nobody looked at after the first week.
The useful question at the end of a motion pass is not whether it feels premium. It is whether someone using this all day would notice its absence. If the answer is that they would just get there slightly sooner, you have found what to remove.