Motion

Duration and easing tokens for animations and transitions.

Overview

Motion serves two purposes: it makes interfaces easier to understand, and it makes them more pleasant to use. A panel animating open helps the eye track what changed and where new content sits in the layout. These moments reduce cognitive load and make the interface feel responsive.At the same time, well-tuned motion gives an application a sense of craft and polish that users notice, even if they can't name it.The design system provides duration and easing tokens that keep these moments consistent across your application.

Duration

Token	Value
--duration-fast-min	130ms
--duration-fast	175ms
--duration-fast-max	230ms
--duration-medium-min	310ms
--duration-medium	410ms
--duration-medium-max	550ms
--duration-slow-min	730ms
--duration-slow	975ms
--duration-slow-max	1300ms

Easing

Token	Value
--ease-standard	cubic-bezier(0.24, 1, 0.4, 1)

Where Motion Helps

Some parts of the interface benefit from animation. Panels, dialogs, and collapsible sections are disorienting when they appear instantly, so animation gives the eye something to follow. Toasts and notifications need just enough entrance to be noticed without startling. State changes like a switch flipping or a selection highlighting feel more intentional with a brief transition.The common thread is that these are moments where the user needs to understand what happened.

Where Motion Hurts

Table row hovers. List item highlights. Anything the user does dozens of times per minute. Adding perceptible duration to these interactions makes the interface feel like it's catching up to the cursor. Keep these fast enough that the user never notices a delay.Animations that block interaction are worse. If a user has to wait for a panel to finish sliding before they can click something inside it, the animation has become an obstacle. Motion should never stand between the user and their next action.

Movement Principles

Not everything needs an animated exit. Elements the user is moving away from, such as tooltips, hover cards, and dropdown menus, can disappear instantly. The user has already shifted their attention. Animate the exit only when it helps orient the user, like a panel closing or a dialog dismissing to reveal what's underneath.
When you do animate exit, match the entrance. A panel that slides in from the right should slide back out to the right.
Direction should match the action. Navigating deeper into content should feel like moving forward. Going back should feel like returning. This keeps the user oriented in the structure of the application.
Contextual UI should feel connected to its trigger. A dropdown should expand from the button that opened it. A popover should appear near the element it describes. This doesn't apply to global UI like command palettes or toasts, which have their own fixed positions.

Respecting User Preferences

Some users experience motion sensitivity; animation that feels polished to one person can cause discomfort for another. Components should honor the operating system's reduced motion setting. When it's enabled, replace animations with instant state changes.

Usage

Applying motion tokens

tsx
import {durationVars, easeVars} from '@astryxdesign/core';
const styles = stylex.create({
  fadeIn: {
    transitionProperty: 'opacity',
    transitionDuration: durationVars['--duration-fast'],
    transitionTimingFunction: easeVars['--ease-standard'],
  },
  slideUp: {
    transitionProperty: 'transform, opacity',
    transitionDuration: durationVars['--duration-medium'],
    transitionTimingFunction: easeVars['--ease-standard'],
  },
});

Best Practices

Guidance	Practices
Do	Animate transitions that involve spatial change: panels opening, content expanding, elements entering the screen.
Do	Use fast tokens for small, frequent interactions. Use medium tokens for larger transitions that rearrange the layout.
Do	Honor reduced motion preferences at the OS level.
Don't	Let hover states or high-frequency interactions feel like they're lagging behind the user.
Don't	Let animation delay when a user can interact with new content. The transition should complete before (or not block) the next action.
Don't	Move elements in ways that contradict where they came from or where they're going.