The most useful question in motion design has nothing to do with springs or bezier curves. It's this: how many times a day will someone see this animation?
The answer draws a hard line. A command palette that opens two hundred times a day should not animate at all. Raycast opens instantly, and that's the correct design, not a missing one. A modal you see a few times a day can afford 200ms. An onboarding screen you see once in your life can afford to be theatrical.
Hitchcock had a version of this rule. A jump scare works exactly once, which is why he preferred suspense: surprise spends its effect in a single beat, while tension can be sustained for a whole film. Animation is novelty, and novelty burns off with repetition. The first time a panel gracefully slides in, it's delightful. The fortieth time, it's a tax. The difference between a polished interface and a sluggish one is often just animations that outlived their welcome.
Feel the tax yourself. Open this palette a dozen times, the way you'd really use one, then turn the animation off:
Apple frames the same idea as a budget. Their first design principle is purpose: every feature spends the user's time, attention, and trust, and you only spend where it pays off. Motion is a purchase against that budget. The iPhone's app-open animation earns its keep because it explains where the app came from and where it will go when dismissed. Spatial teaching, not decoration. An animation that teaches nothing and repeats forever is a recurring charge for a one-time delight.
But when elements do enter, a list loading or a page appearing, there's a technique that makes arrival feel composed rather than abrupt:
- Inbox
- Drafts
- Sent
- Archive
- Trash
With stagger, each item follows the previous by 50ms. The list unfolds in a cascade, and the eye reads it as one continuous gesture. Without it, five items slam into place in a single frame. The content is identical; the choreography is not. Film editors think about rhythm this way constantly. Walter Murch, who cut Apocalypse Now, wrote an entire book arguing that a cut works when it lands on the rhythm of the audience's attention, and lands badly anywhere else. A stagger is nothing but rhythm applied to arrival.
The numbers matter more than the idea. Delays between items should sit around 30 to 80ms, long enough to read as a cascade and short enough that the last item isn't fashionably late. And stagger is decoration: it must never block interaction. If a user can't click item one because item five is still animating, the cascade has become a queue. This is also Apple's single most important motion rule, interruptibility. Every animation must be grabbable, skippable, or redirectable mid-flight. The thought and the gesture happen in parallel, and the interface has no right to make the hand wait for the choreography.
.item {
opacity: 0;
transform: translateY(8px);
animation: item-in 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.item:nth-child(2) { animation-delay: 50ms; }
.item:nth-child(3) { animation-delay: 100ms; }Restraint also has an accessibility floor, not just a taste ceiling. For some users, large sliding surfaces and parallax cause genuine motion sickness, which is what prefers-reduced-motion exists for. Honoring it doesn't mean deleting all feedback. It means trading movement for opacity, the cross-fade instead of the slide, so comprehension survives while the vestibular system is left alone.
This site uses exactly this pattern once, on first load of the homepage, and then gets out of the way. Come back in the same session and the page is simply there. That's the ratio to aim for: motion at the moments of arrival, stillness during the work.
Make most things immediate. Choreograph the few that aren't.