Motion#

Help people understand what changed. Keep feedback close to the action, movement short, and the interface usable while it settles.

Read the Animation Principles for when and why to use motion.

Enter and exit

Preserve the page as context for a temporary task, so people know where they will return when they close it.

Make room

Connect new information to the action that revealed it, so people can follow the change without losing their place.

Respond to input

Confirm a change immediately and locally, so people can trust that their input was accepted and continue without waiting.

Open from an edge

Present supporting information without implying that people have left the page. A consistent return path helps them stay oriented.

Reveal the path

Reveal enough of the hierarchy to explain the current location without making it harder to find.

Keep details with the row

Keep details connected to their row, so people can inspect more information without losing their place in the table.

Show feedback in place

Keep feedback close to the input so people know what to correct. The message should be understandable without relying on motion.

Show activity

Communicate that work is ongoing. A steady rhythm avoids suggesting progress we cannot measure.

Show submission

Confirm that the request is being processed so people do not submit again. Keep the action recognisable while they wait.

Animate an illustration

Make the subject recognisable quickly, then let it settle. Coordinate related movements so the illustration supports the message without competing with the task.

Animate an icon

Reinforce the meaning of an event, such as a new notification. Keep the symbol recognisable; movement should not be the only signal.

Update a bar graph

Keep values comparable during an update. A stable baseline and scale prevent the motion from exaggerating the change.

Reshape a line graph

Preserve the connection between earlier and updated data. Keep dates and scale fixed so people can follow changes without misreading the trend.

Implementation#

Reuse an Eufemia component's built-in motion before adding a custom animation.

Components#

Icon provides opt-in, individually imported animated icons for event feedback and ongoing activity.
Accordion opens and closes content in place.
Table lets details settle into an expanding row.
Breadcrumb reveals a collapsed path.
Dialog and Drawer enter and leave without moving the page.
Switch gives short, direct feedback.
TextCounter makes room for an error message.
HeightAnimation handles expanding or collapsing content with an unknown height.

Custom motion#

Timing and easing#

Keep direct interaction feedback short. Try around 180ms for a small movement, and 300ms to 500ms for larger transitions or expanding content. Do not delay feedback after a user action.

Prefer animating transform and opacity when possible. Reuse Eufemia's animation easing variables.

Easing tokens#

--easing-default

For standard transitions.

300ms in production, shown 4× slower at 1200ms

--easing-fast-bounce

Only for small, direct interactions that benefit from a subtle settling effect, such as a control changing state.

180ms in production, shown 4× slower at 720ms

transition: transform 300ms var(--easing-default);
transition: transform 180ms var(--easing-fast-bounce);

Reduced motion#

Respect the user's reduced-motion preference when writing custom animations. Keep non-animated styles in a meaningful state so disabling motion does not hide content or feedback.

@media (prefers-reduced-motion: reduce) {
  .dnb-custom-motion {
    animation: none;
    transition-delay: 0ms;
    transition-duration: 0.01ms;
  }
}

Eufemia's HeightAnimation component already handles this preference. Read more about reduced motion support.

Suggest an edit