Motion - Cognite Docs

Motion is more than decoration. It shapes how people experience a product — where to look, what to do next, and how the interface feels. When used with intention, motion reduces cognitive load, signals hierarchy, and reinforces Aura’s brand rhythm. In data-heavy UIs, it keeps waiting states purposeful without competing for focus.

Animation anchors

Every animation in Aura should be tested against three qualities. If motion does not reinforce at least one of these, reconsider whether it is needed.

Flow

Motion should move with continuity. Elements arrive and leave with a clear sense of direction and connection — no jumps or teleporting. When an element appears, it should grow into place with a natural stagger; when it disappears, it should recede with intention. Test: Can I follow the motion with my eyes without losing my place?

Calm

Because Aura handles complex, high-stakes data, motion must not compete for the user’s focus. Easings do not overshoot, staggers do not drag, and nothing bounces when it should settle. Calm does not mean slow — most motion in Aura is quiet and fast. It should serve the task and then get out of the way. Expressive motion must be earned. Test: Does this still feel good after 8 hours of use?

Tactile

The interface should feel like something you can reach into. Movement should make the function of interactive elements obvious — buttons snap, panels slide from the edge they belong to, and cards lift when selected. Tactile motion builds intuition so users know what to do without reading labels. Test: Can I tell what’s interactive just by how it moves?

Expressive and productive motion

Every animation in Aura serves one of two roles. Choosing the right role determines how visible, fast, and expressive the motion should be.

Role	When to use	Character
Productive	Menus, tooltips, state changes, content fading into place, cards rearranging	Fast, subtle, and functional — often not consciously noticed, but missed if absent
Expressive	AI generating a response, transitions between views, onboarding sequences	Slower, more visible — use sparingly to draw attention on purpose

Guidelines

Default to productive motion for everyday UI.
Escalate to expressive only when the moment carries narrative weight.
Productive motion keeps the interface feeling responsive and connected without competing for focus.
Expressive motion gives the system its character — but overuse trains users to ignore it.

What to animate

Every animation is built from a combination of basic properties. Knowing what you can change helps you make deliberate choices about how an element enters, exits, or transitions between states.

Property	Tailwind utilities	Typical use
Position	`translate-x-`, `translate-y-`	Entrances, exits, layout transitions — the most common property
Scale	`scale-*`	Emphasis, hierarchy, drawing attention
Rotation	`rotate-*`	Rare in UI; use with restraint
Opacity	`opacity-*`	Fades in and out; often combined with position or scale
Color	`transition-colors`, token-backed `bg-` / `text-`	State changes, hover feedback, decorative accents
Mask / morph	CSS or SVG (no single utility)	Expressive disclosure and progressive reveal only

Guidelines

Combine properties intentionally — opacity plus position creates softer transitions than position alone.
Animate only the properties that communicate the change. Do not animate everything by default.
Use token-backed color utilities for color transitions so theming stays consistent.

Timing

Timing is about when things move and for how long. Well-timed animations feel invisible; poor timing feels sluggish or abrupt.

Guidelines

Duration scales with area. Small UI elements (a checkbox, a menu item) need very short animations. Large transitions (a full panel or page) need more time. Values are relative to each other, not absolute.
Stagger creates rhythm. When multiple elements animate, offset their timing so they reveal in sequence rather than all at once. Stagger draws attention to certain elements first and choreographs views with many moving parts.
Exits are often slightly faster than entrances — once the user has made a choice, the UI should clear the way quickly.

Duration tokens

Token	Tailwind utility	Value	Use
`duration/short`	`duration-200`	up to 200ms max	Small components, productive UI
`duration/long`	`duration-500`	~500ms	Large surfaces, expressive transitions

Stagger tokens

Token	Tailwind utility	Value	Use
`stagger/tight`	`delay-[33ms]`	33ms	Dense lists — e.g. dropdown items revealing one by one
`stagger/default`	`delay-[100]`	100ms	Standard grouped reveals
`stagger/wide`	`delay-[133ms]`	133ms	Secondary supporting elements that follow primary content

Easing

Easing brings a sense of real-world momentum to digital interfaces. Nothing starts or stops instantly — movement needs time to build and slow down. Heavier elements start slower and settle with more weight; lightweight elements respond quickly with less resistance.

Tokens

Token	Tailwind utility	`cubic-bezier`	Use
`ease/standard`	`ease-standard`	`(0.40, 0.00, 0.15, 1.00)`	Most state changes, repositioning, and transitions within a view
`ease/entrance`	`ease-entrance`	`(0.00, 0.00, 0.15, 1.00)`	Elements appearing on screen — panels opening, content loading in
`ease/exit`	`ease-exit`	`(0.67, 0.00, 0.83, 0.83)`	Elements leaving the screen — dismissals, closings, removals
`ease/sine`	`ease-sine`	`(0.33, 0.00, 0.67, 1.00)`	Opacity fades and subtle color shifts — smooth without dramatic acceleration

Pairing guide

Scenario	Duration	Easing
Productive entrance	`duration-200`	`ease-entrance`
Expressive entrance	`duration-500`	`ease-entrance`
Exit	`duration-200` or shorter	`ease-exit`
In-view state change	`duration-200`	`ease-standard`
Opacity or color only	`duration-200`	`ease-sine`

Applied examples

These recipes show how tokens combine in real interactions. They are reference examples only, not additional system tokens. Prefer Aura primitives’ built-in motion where available; use these patterns only for custom UI.

A dropdown panel drops down while being revealed. List items stagger in one by one as the panel opens, adding flow without slowing the interaction. Total duration: 233ms.

Element	Property	From → To	Duration	Easing	Delay
Panel	Position (Y)	0 → 176	200ms	`ease-entrance`	33ms
Panel	Opacity	0% → 100%	100ms	`ease-sine`	—
List item	Opacity	0% → 100%	100ms	`ease-sine`	33ms per item

The panel closes slightly faster than it opens — the user no longer needs to read it. No stagger on list items keeps the exit clean. Button copy fades out and in to confirm the selection, with an accent wipe for tactile feedback. Total duration: 233ms.

Element	Property	From → To	Duration	Easing	Delay
Panel	Position (Y)	176 → 0	167ms	`ease-exit`	—
Panel	Opacity	100% → 0%	67ms	`ease-sine`	100ms
List item	Opacity	100% → 0%	100ms	`ease-sine`	67ms
Button copy	Opacity (out)	100% → 0%	100ms	`ease-sine`	33ms
Button copy	Opacity (in)	0% → 100%	100ms	`ease-sine`	133ms
Button accent	Position (wipe)	-353 → 42	433ms	`ease-sine`	133ms

Graph entrance (expressive)

The main content animates in with a subtle scale and opacity change, arriving quickly and settling into place. Supporting elements follow with a stagger. The graph line draws on a separate, slower timeline so it does not compete with the primary entrance. Total duration: 467ms (graph line: 1333ms).

Element	Property	From → To	Duration	Easing	Delay
Container	Scale	110% → 100%	333ms	`ease-entrance`	—
Container	Opacity	0% → 100%	133ms	`ease-sine`	—
Button row	Position (Y)	177 → 157	333ms	`ease-entrance`	100ms
Button row	Opacity	0% → 100%	133ms	`ease-sine`	100ms
Separator + sources	Position (Y)	221.5 → 201.5	333ms	`ease-entrance`	133ms
Separator + sources	Opacity	0% → 100%	133ms	`ease-sine`	133ms
Graph line	Draw progress	0 → 100	1333ms	`ease-entrance`	—

Implementation

Use Tailwind utilities mapped to Aura motion tokens. Do not hardcode cubic-bezier() values or raw transition: 0.3s ease in product code.

Decision checklist

Role — Is this productive (default) or expressive (earned)?
Properties — Which properties communicate the change? Animate only those.
Duration — Small element (duration-200) or large surface (duration-500)?
Easing — Entering (ease-entrance), exiting (ease-exit), in-view (ease-standard), or opacity/color (ease-sine)?
Stagger — Multiple elements? Offset with stagger/tight, stagger/default, or stagger/wide.
Reduced motion — Respect prefers-reduced-motion; disable or shorten non-essential animation.

Example

<div
  className={cn(
    "transition-[transform,opacity] duration-200 ease-entrance delay-[33ms]",
    isOpen
      ? "translate-y-0 opacity-100"
      : "-translate-y-2 opacity-0 pointer-events-none"
  )}
>
  {children}
</div>

<div
  className={cn(
    "transition-[transform,opacity] duration-200 ease-entrance",
    "motion-reduce:transition-none motion-reduce:transform-none",
    isOpen ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"
  )}
>
  {children}
</div>

Aura primitives handle motion for most common interactions. For custom interactive elements, pair motion with the signifiers documented in Interaction states. Ensure focus and state changes remain accessible — see Accessibility.

​Animation anchors

​Flow

​Calm

​Tactile

​Expressive and productive motion

​Guidelines

​What to animate

​Guidelines

​Timing

​Guidelines

​Duration tokens

​Stagger tokens

​Easing

​Tokens

​Pairing guide

​Applied examples

​Dropdown in (productive)

​Dropdown out (productive)

​Graph entrance (expressive)

​Implementation

​Decision checklist

​Example

Animation anchors

Flow

Calm

Tactile

Expressive and productive motion

Guidelines

What to animate

Guidelines

Timing

Guidelines

Duration tokens

Stagger tokens

Easing

Tokens

Pairing guide

Applied examples

Dropdown in (productive)

Dropdown out (productive)

Graph entrance (expressive)

Implementation

Decision checklist

Example