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

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

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

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

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

Use the existing transitions in Dialog, Drawer, and Popover before adding custom ones. Test opening, interruption, repeated activation, and closing.

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.

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 and the token setup for related guidance.