# Springs and duration · Motion Duration is the part of an animation people argue about most and think about least. Emil Kowalski’s numbers are consistent across everything he has written, and when they run out he reaches for physics. ### The duration tables The rule of thumb from [You Don’t Need Animations](https://emilkowal.ski/ui/you-dont-need-animations) is under 300ms. The skill excerpt in [Agents with Taste](https://emilkowal.ski/ui/agents-with-taste) breaks that down. > Figure. Duration GuidelinesEmil Kowalski, Agents with Taste The fuller table in his [skill file](https://github.com/emilkowalski/skill/blob/main/skills/emil-design-eng/SKILL.md) is more generous at the top: button press feedback 100 to 160ms, tooltips and small popovers 125 to 200ms, dropdowns and selects 150 to 250ms, modals and drawers 200 to 500ms, marketing animation longer. The course’s agent rules say it plainer: never longer than a second unless illustrative, most around 0.2s to 0.3s. ### Size and distance Two rules keep the table from being mechanical: larger elements animate slower, and duration should match distance. In [Train Your Judgement](https://emilkowal.ski/ui/train-your-judgement) a full-screen mobile menu at sub-300ms feels jarring because the distance is so much larger; bigger elements are heavier, “the same way a truck takes longer to stop than a bicycle.” His drawer, [Vaul](https://emilkowal.ski/ui/building-a-drawer-component), is the production example: 500ms, because that mimics the iOS sheet, with the Ionic curve from the last section. Source The duration tables are from the Agents with Taste skill excerpt and the emil-design-eng SKILL.md. The truck and bicycle line is the hidden breakdown of the first Train Your Judgement exercise. > Figure. CSSEmil Kowalski, Building a Drawer Component ### Springs instead of clocks The other way to set duration is to stop setting it. A **spring** (An animation described by physical parameters such as stiffness, damping, and mass rather than by a fixed duration, so it settles the way a real object would.) is described by physics rather than time; the skill file says springs feel more natural because they simulate real physics and settle by their parameters rather than a clock. In [Great Animations](https://emilkowal.ski/ui/great-animations) he points at the Dynamic Island, which “feels natural, almost like a living organism,” against web apps where changes happen instantly, which feels artificial because nothing around us appears or disappears instantly. He built a visualizer with stiffness, damping, and mass sliders for that post; the playground below is the same idea. Stiffness up tightens the curve; damping down makes it overshoot. > Figure 2. Spring playground. A spring has no duration. Its stiffness, damping, and mass decide how it settles, and the curve and the dot are the same equation. Move a slider, watch the curve, then play.Illustrative numbers ### Config, bounce, interruption His configurations are modest. The skill file gives two ways to write a spring in Motion: in time, or in physics. > Figure. TypeScriptEmil Kowalski, emil-design-eng SKILL.md Bounce, when used, stays at 0.1 to 0.3; avoid it in most UI and save it for drag-to-dismiss and playful interactions. Train Your Judgement makes it a matter of brand: a bouncy accordion feels approachable in a learning app and unserious in a finance app, so “no bounce should be your default.” In Good vs Great Animations a component that follows the mouse feels artificial when it snaps to the pointer, so he runs the value through `useSpring`, then qualifies it: that works because the effect is decorative, and a functional graph in a banking app should have no animation. The last reason to prefer springs and transitions over keyframes is that they can be **interrupted** (Able to be changed mid-flight: an animation that can smoothly retarget to a new value while it is still running instead of jumping or restarting.). In [Building a Toast Component](https://emilkowal.ski/ui/building-a-toast-component) Sonner first used keyframes, and when toasts were added quickly the older ones jumped to their new positions, because a keyframe cannot change its end value while it plays. CSS transitions “can be interrupted and retargeted, even before the first transition has finished,” so he switched. Train Your Judgement generalises it to menus, modals, accordions, and drawers; the skill file adds that springs keep their velocity when interrupted where keyframes restart from zero. Put together: start from the table, let distance and size pull the number, use a spring or transition for anything gesture-driven or rapidly toggled, keep bounce near zero, and time asymmetrically, “slow where the user is deciding, fast where the system is responding.”