Springs and duration

The duration tables#

The rule of thumb from You Don’t Need Animations is under 300ms. The skill excerpt in Agents with Taste breaks that down.

| Element Type                      | Duration  |
| --------------------------------- | --------- |
| Micro-interactions                | 100-150ms |
| Standard UI (tooltips, dropdowns) | 150-250ms |
| Modals, drawers                   | 200-300ms |

- UI animations should stay under 300ms
- Larger elements animate slower than smaller ones
- Exit animations can be ~20% faster than entrance
- Match duration to distance - longer travel = longer duration

The fuller table in his skill file 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 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, is the production example: 500ms, because that mimics the iOS sheet, with the Ionic curve from the last section.

.drawer {  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);}

Springs instead of clocks#

The other way to set duration is to stop setting it. A spring 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 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.

Config, bounce, interruption#

His configurations are modest. The skill file gives two ways to write a spring in Motion: in time, or in physics.

{ type: "spring", duration: 0.5, bounce: 0.2 }{ type: "spring", mass: 1, stiffness: 100, damping: 10 }

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. In 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.”