# Training judgement · Taste Emil Kowalski’s [Train Your Judgement](https://emilkowal.ski/ui/train-your-judgement) turns the previous section into a drill. Its first line: “AI can write animation code. What it can’t do is know what feels right.” Each exercise shows two animations; you pick the better one, write down why, then read his breakdown, because putting it into words trains your **judgement** (Putting into words why something feels right trains your ability to articulate your judgment, a skill that will be incredibly valuable in the AI era.). The figure rebuilds three of his eleven comparisons with his values. Do them first; the walkthrough spoils them. > Figure 1. Which feels better. Three of Emil Kowalski's side-by-side comparisons, rebuilt with his values. Replay both, decide, then read his reasoning. The point is not to be right; it is to notice what you noticed.Constants from the source ### Duration, easing, and scale A full-screen mobile menu at two durations: keep UI animations under 300ms holds for tooltips, dropdowns, and buttons, but a full-screen menu travels much further, so a short duration feels jarring. Duration scales with distance; bigger elements are heavier, “the same way a truck takes longer to stop than a bicycle.” A toast entering with ease-in versus ease-out: ease-in starts slow and feels sluggish; ease-out gives instant feedback, decelerates into place, and feels faster because the curve is sharp at the start. An element scaling in from 0 versus 0.9: scale(0) looks like it came from nowhere, while a higher start resembles the real world, “just like a balloon, even when deflated it has a visible shape.” Start from 0.90 to 0.95. > Figure. CSSIllustration ### Context and frequency An accordion with and without bounce is where Emil refuses to pick: for a learning app the bounce adds energy, for a finance app it feels unserious. Bounce communicates personality the way easing intensity does, so default to zero and add it when the brand calls for it. A hover highlight in a list, instant versus faded: the fade looks smoother in a demo, but move quickly and it trails your cursor. For something touched hundreds of times a day the direct connection matters more; Raycast, which Emil uses that often, does not animate on open because delight would become annoyance (see [frequency and novelty](https://learn-ui.com/chapters/invisible-details/frequency-and-novelty)). ### Press, removal, interruption A button pressed to scale 0.9 loses a tenth of its size, too much in most cases; at 0.97 the compression is barely visible but still felt, and “subtlety reads as quality.” Removing a chip compares Motion’s AnimatePresence in default mode, where the exiting chip stays in flow until its animation ends and the siblings slide over afterwards, with `mode="popLayout"`, which pulls it out of flow on the first frame so the siblings move during the exit. > Figure. TSXIllustration Handling interruptions: keyframes jump to their new position when toggled mid-animation, CSS transitions retarget smoothly. For anything toggled rapidly, menus, modals, accordions, drawers, prefer transitions. Source The reasoning for each exercise is hidden behind the picker on Train Your Judgement until you commit to an answer. The breakdowns summarised here are Emil’s, including the takeaway lines. ### Origin, stagger, and layers A popover that animates in from nowhere has no connection to its button; one that comes from the button says “I clicked this, and this appeared from it.” The default transform-origin of center is wrong for almost every triggered element; Radix UI and Base UI expose CSS variables for the trigger position. A hero staggered with identical timing feels artificial, like a linear easing; better to show the title first, delay the subtitle and buttons increasingly, and only fade the small pill. A side panel that slides in and then staggers its items is two layers of entrance; one could call it delightful, Emil writes, but the panel that arrives with its content already there is faster. “Sometimes the best animation is no animation.” The same criteria appear as principles in [Great Animations](https://emilkowal.ski/ui/great-animations): natural (springs, the Dynamic Island), fast (ease-out, usually under 300ms), purposeful (never animate keyboard-initiated actions), performant (transform and opacity), interruptible, accessible under prefers-reduced-motion, and cohesive, which is why Sonner’s toast is slightly slower and uses ease. [Good vs Great Animations](https://emilkowal.ski/ui/good-vs-great-animations) adds ease-in-out for things already on screen, custom curves because the built-in ones are too weak, springs for decorative mouse-driven changes but none for a functional banking graph, and a tabs highlight that only looks wrong in slow motion, which clip-path fixes. Two habits follow: play the animation frame by frame, and review it the next day. The drill has three moves. Recreate, because as Emil says in [Building an animation course](https://emilkowal.ski/ui/building-an-animation-course), students have to feel the difference themselves, “like touching a physical object to understand its texture.” Compare versions side by side. Articulate the reason before reading anyone else’s; the last section of this chapter is about why that move now matters more.