> ## Documentation Index
> Fetch the complete documentation index at: https://invoca-5bd45748-mintlify-6c3474a6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Motion
> Durations and easings, and the rules for applying them.
## What it governs
Every transition and animation: how long it takes and how it accelerates. Eleven tokens —
seven durations and four easings.
**Motion is the least-decided foundation** — see
[Open issues](/invoca-design-system/foundations/motion/open-issues) for what that leaves
unsettled. Treat that as the cost of change: a color token overturns an Invoca decision, a
duration token overturns nothing that has been written down.
## Vocabulary
Durations are named by **length** (`shortest` … `complex`) and easings by **curve shape**
(`ease-in`, `ease-out`, `sharp`). Neither names what the value is *for*, so there is no
shared way to say how Titan moves — see
[TITAN-GAP-16](/invoca-design-system/foundations/open-decisions#titan-gap-16).
## Durations
| Token | Value | For |
| --------------------------------- | ----- | -------------------------------------------------------------------------------- |
| `motion-duration-shortest` | 150ms | State changes on a control already under the pointer — hover, active, focus ring |
| `motion-duration-shorter` | 200ms | Small elements appearing in place — tooltip, checkbox check, chip removal |
| `motion-duration-short` | 250ms | Expanding or collapsing in place — accordion, disclosure, inline row expansion |
| `motion-duration-standard` | 300ms | The default for anything without a more specific reason |
| `motion-duration-complex` | 375ms | Multi-part transitions where several things move in sequence |
| `motion-duration-entering-screen` | 225ms | An element arriving from off-screen — drawer opening, menu appearing |
| `motion-duration-leaving-screen` | 195ms | An element departing — drawer closing, menu dismissing |
**Entering is slower than leaving** (225ms vs 195ms), and that asymmetry is deliberate.
Arrival needs to be followed; departure needs to get out of the way. A dismissal that takes
as long as an appearance feels sluggish, because the user has already moved on.
## Easings
| Token | Curve | For |
| --------------------------- | ------------------------------ | ----------------------------------------------------------------- |
| `motion-easing-ease-in-out` | `cubic-bezier(0.4, 0, 0.2, 1)` | The default. Anything that starts and ends on screen. |
| `motion-easing-ease-out` | `cubic-bezier(0.0, 0, 0.2, 1)` | Elements **entering**. Fast at the start, settling at the end. |
| `motion-easing-ease-in` | `cubic-bezier(0.4, 0, 1, 1)` | Elements **leaving**. Slow at the start, accelerating off screen. |
| `motion-easing-sharp` | `cubic-bezier(0.4, 0, 0.6, 1)` | Elements that leave and may return — a temporary panel |
## Choosing a token
| You need… | Duration | Easing |
| ---------------------------------------------- | ------------------------- | ------------- |
| Hover, focus, or active feedback on a control | `shortest` (150ms) | `ease-in-out` |
| A tooltip or small popover appearing | `shorter` (200ms) | `ease-out` |
| An accordion or disclosure expanding | `short` (250ms) | `ease-in-out` |
| A drawer or side panel opening | `entering-screen` (225ms) | `ease-out` |
| A drawer or side panel closing | `leaving-screen` (195ms) | `ease-in` |
| A modal appearing | `entering-screen` (225ms) | `ease-out` |
| A modal dismissing | `leaving-screen` (195ms) | `ease-in` |
| Anything with no more specific reason | `standard` (300ms) | `ease-in-out` |
| A sequence where several elements move in turn | `complex` (375ms) | `ease-in-out` |
**Pair the easing with the direction.** `ease-out` for entering, `ease-in` for leaving.
Reversed, an entrance appears to hesitate and an exit appears to slam. This is the most
common motion defect and it is invisible in a static review.
## Token reference
## Constraints
| ID | Constraint | Rationale |
| ---------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **TITAN-MOT-01** | Duration and easing come from tokens. Never a literal `300ms` or an inline `cubic-bezier()`. | A literal is invisible to the audit and cannot be adjusted system-wide. It is also how a 400ms outlier ends up next to a 300ms standard. |
| **TITAN-MOT-02** | Entering uses `ease-out`; leaving uses `ease-in`. | Reversed easing makes entrances hesitate and exits slam. The asymmetry is what makes motion read as physical. |
| **TITAN-MOT-03** | Every transition respects `prefers-reduced-motion: reduce`. | Vestibular disorders make large-area motion physically painful. This is a health requirement, not a preference. |
| **TITAN-MOT-04** | Reduced motion removes movement, not feedback. Substitute an instant state change; never remove the state change. | A user who cannot see that a menu opened is worse off than one who saw it slide. |
| **TITAN-MOT-06** | Motion never conveys information on its own. | It is unavailable under reduced-motion, invisible to screen readers, and missed entirely by anyone who looked away. |
| **TITAN-MOT-07** | Nothing animates that the user did not initiate, except loading indicators. | Unprompted motion pulls attention away from the task and cannot be predicted or avoided. |
### Retired
| ID | Was | Why retired |
| ---------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **TITAN-MOT-05** | Nothing exceeds `motion-duration-complex` (375ms). | The 7 defined duration tokens already top out exactly at `motion-duration-complex` (375ms) — as long as TITAN-MOT-01 (tokens-only, no literals) holds, this ceiling is structurally guaranteed by the closed token set. Retired, not reversed. |
## Accessibility
**Reduced motion is the whole accessibility story for this foundation**, and it is not
currently implemented anywhere in the token layer.
```css theme={null}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
```
* **Substitute, do not delete.** A drawer that slid in should now appear instantly — it
should still appear. Removing the transition must never remove the state change.
* **Large-area movement is the harmful case.** Full-screen slides, parallax, and
zoom-on-scroll trigger vestibular symptoms. A 150ms color fade on a button does not.
When in doubt, keep opacity, drop transform.
* **Nothing flashes more than three times per second**
([WCAG 2.2 Three Flashes, AA](https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html)).
Loading indicators are the usual risk.
* **Anything that moves for more than five seconds needs a pause control**
([Pause, Stop, Hide, AA](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)).
Indeterminate spinners on long operations are the case to watch.
* Motion must never be the only indication that something happened. Pair it with a text or
state change a screen reader can announce.
## Known issues
Divergences, open decisions, and undocumented gaps for Motion.
## Related
**2 core components consume this foundation** — derived from token usage in
`components/core/src/components`, not assumed:
`Card` · `Dropzone`