Motion - Invoca

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

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.

@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). Loading indicators are the usual risk.
Anything that moves for more than five seconds needs a pause control (Pause, Stop, Hide, AA). 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

Motion: open issues

Divergences, open decisions, and undocumented gaps for Motion.

2 core components consume this foundation — derived from token usage in components/core/src/components, not assumed: Card · Dropzone

​What it governs

​Vocabulary

​Durations

​Easings

​Choosing a token

​Token reference

​Constraints

​Retired

​Accessibility

​Known issues

Motion: open issues

​Related

What it governs

Vocabulary

Durations

Easings

Choosing a token

Token reference

Constraints

Retired

Accessibility

Known issues

Related