Animation
Guidelines
Always start with, does this animation cause friction or delight? If the answer is delight at the cost of friction, the interaction should not have animation.
Easing
The main ingredient that influences how our animations feel is easing. It describes the rate at which something changes over a period of time. It’s the most important part of any animation. It can make a bad animation look great, and a great animation look bad.
| Ease type | Behavior | When to use |
|---|---|---|
| ease-out | Accelerates at the beginning, then slows down | Every animation that responds to user interaction |
| ease-in-out | Starts slow, speeds up in the middle, then slows down again | Elements already on screen that need to move to a new position or morph into a new shape |
| ease | Similar to ease-in-out but more symmetrical | General-purpose transitions where a balanced feel is needed |
| linear | Constant speed throughout — no acceleration or deceleration | Constant animations like loading spinners |
| ease-in | Starts slowly and ends fast — the slow start makes interfaces feel sluggish | ⚠️ DO NOT USE - Avoid in UI animations |
Scale
Elements that animate from scale(0) can make an animation feel off. Try animating from a higher initial scale instead (0.9+). It makes the movement feel more gentle, natural, and elegant.
Timing
As a rule of thumb, UI animations should generally stay under 300ms. Both the size of the element and the distance it travels should inform the duration — smaller, lighter elements should feel quick and snappy, while larger elements should move slightly slower to mimic natural physics.
| Duration | Category | When to use | Examples |
|---|---|---|---|
| 100ms | Short | Small elements with immediate feedback that cover minimal distance | Checkboxes, toggles, carousel indicators |
| 150ms or 180ms | Medium | The majority of UI transitions — responsive but clearly perceptible | Buttons, tooltips, dropdowns, hover states |
| 250ms | Long | Large elements that transition at a page level | Modals, side sheets, bottom sheets |
| 400ms+ | Expressive only | Never use for functional transitions — reserved for storytelling animations | Animated icons, illustrated onboarding sequences |
Entry vs. exit: Exit animations should be slightly faster than entry animations. Once an element has served its purpose, users don’t need to watch it leave — getting it out of the way quickly keeps the interface feeling responsive.
Accessibility
Some users experience motion sickness, dizziness, or discomfort from on-screen animations — particularly those with vestibular disorders. Operating systems expose a “Reduce Motion” preference (macOS: System Settings → Accessibility → Display → Reduce Motion) and browsers surface it via the prefers-reduced-motion media query.
Any animation we add must respect this setting. The recommended approach is to scope motion inside a @media (prefers-reduced-motion: no-preference) block, so that transitions only run for users who have not opted out:
Using no-preference rather than reduce is intentional — it ensures the animation is opt-in by default and automatically disabled for anyone who has turned on Reduce Motion, without requiring an explicit reduce case to handle.
Usage
Current animations:
