Practical tips
Emil Kowalski says one mistake he made early on was believing animation was an art you either get or you do not. His 7 Practical Animation Tips is the counter-argument: a short list of tricks that make motion feel better without the magic. They are numbered, and the order is his.
One: scale your buttons. The interface “should feel as if it’s listening to the user,” so give feedback on every action as soon as possible, and the cheapest feedback is a scale-down on press. transform: scale(0.97) on :active is enough. In Train Your Judgement he compares it with 0.9, where the button loses a tenth of its size, and calls that too much: “If you can clearly see the button shrinking, the scale is too aggressive.” Two: do not animate from scale(0). Start from 0.9 or above (his demo uses 0.93, his skill table says 0.95). The reason is the balloon: a deflated balloon still has a visible shape, it never vanishes completely, so an element that grows from nothing looks like it came out of nowhere. Three: do not delay subsequent tooltips. The first one waits to prevent accidental activation; after that, the next should open with no delay and no animation. Radix and Base UI both skip the delay, and Base UI exposes a data-instant attribute so you can set transition-duration: 0ms for the follow-ups. His example tooltip transitions transform and opacity over 0.125s with ease-out from scale(0.97).
Four is the easing argument from the previous section, ease-out for enter and exit, and it sits in the middle of the list because, in his words, it can make a bad animation look great and a great one look bad. Five: make popovers origin-aware. A dropdown should scale in from the button that opened it, and the CSS default of transform-origin: center is, he says, wrong in most cases; the difference is most noticeable when both the horizontal and vertical origins are off, such as top right. Radix and Base UI expose CSS variables for this (--radix-dropdown-menu-content-transform-origin and --transform-origin), and shadcn/ui already wires them. His skill file notes one exception: modals keep the center origin, because they are not anchored to a trigger. He expects you to wonder whether anyone notices, and answers that it does not matter much: “In the aggregate, unseen details become visible, they compound.”
Six: keep animations fast. This is the spinner and the 180ms versus 400ms select again, with the under-300ms rule, plus one instruction that echoes 2.1: remove animations or hover effects entirely if they are seen tens or hundreds of times a day. Seven: use blur when nothing else works. If you have tried several easings and durations and something still feels off, add a little filter: blur(). His demo is a button that crossfades between two states, once plain and once with 2px of blur (and the 0.97 press from tip one). The blur “bridges the visual gap between the old and new states”; without it you see two distinct objects. His skill file caps it: keep blur under 20px, because heavy blur is expensive, especially in Safari.
Train Your Judgement adds two tips the list does not have. On removing elements: with Motion’s AnimatePresence, the default mode keeps the exiting chip in flow until its animation ends, so the siblings wait and then slide; mode="popLayout" pulls it out of flow on the first frame so the siblings start moving in parallel with the exit, and the whole thing feels tight. On interruptions: for anything toggled rapidly, prefer CSS transitions over keyframes, because keyframes jump to their new position when the state changes mid-play and transitions animate to it.
The last tip is about stagger, and here Emil and Rauno Freiberg both have something to say. Emil keeps delays short, 30 to 80ms between items, because long delays make the interface feel slow, and he insists stagger is decorative: never block interaction while it plays. His Train Your Judgement hero exercise is about hierarchy rather than delay. The version that staggers every element top to bottom with identical timing is technically staggered but feels artificial, “the same effect on motion as a linear easing”; the better version gives the title the most screen time and lets the least important element just fade. Rauno, in Designing Depth, reaches for nature: a school of fish is mesmerising because of slight differences in timing among things that look identical, and a flock taking flight does not move in perfect synchrony. His product examples are OpenAI staggering the fade-in of grid content, which does not feel slower but does stop the user wondering how many items just changed, and the iPhone unlock, where the Home Screen apps stagger their translation and make “a primitive swipe feel three-dimensional.” Use the playground to feel the arithmetic. The per-item delay multiplies by the count, so a delay that is pleasant for four rows drags for forty; watch the number for how long the last item waits.
The two authors agree more than they differ, and the boundary is frequency again. Rauno notes that the Home Screen stagger is a first point of contact, “a great moment to especially dial the novelty of animations up a notch,” and in Novelty he observes that iOS only staggers the Home Screen after the first unlock, and that Paco Coursey’s site staggers only on first load. Emil’s Train Your Judgement side-panel exercise is the negative case: a panel that slides in and then trickles its menu items one by one is two layers of entrance, and the better version slides the panel in with the content simply there. “Sometimes the best animation is no animation.” Take the seven tips as defaults, stagger only where the reader benefits from reading in order, and keep the delays short enough that nobody waits for you.