# Motion (/foundations/motion)



<div className="hd-motion">
  Use motion to show the result of an action or explain a change in layout. Keep controls available while transitions run, and let a person interrupt an animation by taking the next action.

  ## Durations [#durations]

  The published preset contains seven duration tokens. The suggested uses below help choose a starting point; existing components define their own behavior.

  <MotionDurations />

  <details>
    <summary>
      Duration token reference
    </summary>

    | Token     | Duration | Suggested use                                   |
    | --------- | -------- | ----------------------------------------------- |
    | `fastest` | 50ms     | Brief feedback on a small state change.         |
    | `faster`  | 100ms    | Hover or pressed-state feedback.                |
    | `fast`    | 150ms    | A small control transition.                     |
    | `normal`  | 200ms    | A short reveal or fade.                         |
    | `slow`    | 250ms    | A larger reveal.                                |
    | `slower`  | 300ms    | A panel moving a longer distance.               |
    | `slowest` | 400ms    | A larger change that needs more time to follow. |
  </details>

  Use the token name with `transitionDuration` or `animationDuration`. In the token helper, use the full path, such as `token.var("durations.fast")`.

  ```tsx
  import { css } from "@hashintel/ds-helpers/css";

  export const item = css({
    backgroundColor: "bg.subtle",
    transitionProperty: "[background-color]",
    transitionDuration: "fast",
    transitionTimingFunction: "ease-out",
    _supportHover: { backgroundColor: "bg.subtle.hover" },
    _motionReduce: { transition: "[none]" },
  });
  ```

  Square brackets pass a literal CSS value through Panda's strict token checks. The easing in this example is a CSS choice. The shared duration scale is published; a separate DASH scale of named enter, exit, and presentation easing tokens is not defined in this preset.

  ## Choose what moves [#choose-what-moves]

  * Animate the element whose state changed, so the result stays connected to the action.
  * Use transform or opacity for movement and fades where possible. Check layout changes for unexpected jumps and expensive rendering.
  * Keep repeated feedback short. A frequently used control should not make someone wait for the animation to finish.
  * Keep data values readable while they update. Explain completion or failure with text as well as a visual transition.

  <MotionExamples />

  Use the existing transitions in [Dialog](/components/dialog), [Drawer](/components/drawer), and [Popover](/components/popover) before adding custom ones. Test opening, interruption, repeated activation, and closing.

  ## Reduced motion [#reduced-motion]

  Honor `prefers-reduced-motion: reduce` in custom motion. Panda exposes it through `_motionReduce`; the example above makes the state change immediate. For a keyframe animation, also override `animation` when reduced motion is requested.

  For large movement, parallax, or decorative loops, show the final state or a static illustration. Retain the information conveyed by the animation: loading still needs a readable status, and a successful action still needs confirmation. Give repeating demonstrations a pause control.

  <MotionReduced />

  This applies to presentation and marketing motion as well as product controls. Choose any deck-specific timing explicitly; proposed presentation tokens in the prototype are not published package APIs.

  Check the complete interaction with reduced motion enabled. See [Accessibility](/foundations/accessibility) and the [token setup](/foundations/design-system#source-and-setup) for related guidance.
</div>