Intro

Motion design uses animated visual elements to support interactions, communicate intent, and create a more engaging user experience. You can use it in SAP software to make interfaces feel intuitive, user-friendly, and modern.

Subtle animations and smooth transitions provide visual feedback that guides users through complex tasks and helps them stay focused. Motion design also makes navigation feel natural and reduces cognitive effort by clearly showing changes or actions. A consistent use of motion adds a polished feel to SAP applications and helps drive user adoption.

The example below shows motion design in action: when the value of a badge increases, a subtle animation draws attention to the change. This visual cue helps users notice updates quickly without interrupting their workflow.

Motion design for a change in the value of a badge

[internal_only]Animation behaviors and timings are standardized in the Motion Design Collection. [/internal_only]

When to Use

Decide whether to use motion design based on the use case. While animations can look modern and appealing, use them only to support specific functions – never just for visual effect.

How We Use Motion Design

Microanimations

Microanimations are small, focused animations or visual cues that support user interactions. They add subtle motion to static interfaces, making it easier for users to understand what’s happening and what to do next, especially during simple, single-step tasks.

You’ll see microanimations in everyday actions, like adjusting settings, working with tables, signing in, entering inputs, or refreshing lists.

Microanimations help make interactions in our design system feel clearer and more intuitive. Since the core design already addresses broader user needs, microanimations can add responsiveness and polish without overwhelming users.

Durations and Animation Pace

SAP’s motion design uses a natural weight system, so animations feel realistic and grounded. The size and perceived "weight" of an element influence how it moves. Smaller elements often use quicker, lighter animations, while larger elements, like page transitions, move more slowly to match their visual presence and importance.

Most animation steps fall into one of the categories below:

Behavior and Interaction

Component Connection

Animations are usually connected to components, adding motion to one or more parts when users interact with them. This makes animation a natural part of the component’s behavior, allowing for flexibility and straightforward implementation.

For example, the notification component uses several animations, such as appear, disappear, stack update, and stack movement.

Triggers

Animations can be tied to different types of user interaction, such as clicks or drag actions, as appropriate. They can also be triggered by changes in state, like when a new notification is received, or automatically when a component appears – for example, when a dialog opens.

Animation Density

Animations need to support different levels of visual complexity, known as animation modes. Although all animations start with the full motion range, make sure they can adapt to meet user needs and accessibility requirements.

To support this, provide the following four animation modes:

• Full: Shows the complete animation as defined in the animation set.
• Basic: Removes purely decorative animation elements and keeps meaningful feedback.
• Minimal: Keeps only the essential motion elements needed for functional clarity.
• None: Disables all animations completely.

Motion Behavior

Easing

Easing in animation is about how an object accelerates or decelerates as it moves. Instead of moving at a constant speed, easing makes animations feel more natural and realistic by reflecting how objects move in the real world. For example, elements can start slowly and speed up (ease-in), start quickly and slow down (ease-out), or do both (ease-in-out). Using the right easing guides users’ attention and makes transitions feel smoother and more intuitive.

We currently use the following types of easing in our component animations:

• Linear: The animation moves at a constant speed from start to finish, with no acceleration or deceleration.
• Ease-in (A): The animation starts slowly and accelerates toward the end. Use this for elements entering the screen or starting a new action.
• Ease-out (B): The animation starts quickly and decelerates as it finishes. This is best for elements leaving the screen or coming to a stop.
• Ease-in-out (C): The animation starts slowly, speeds up in the middle, and then slows down toward the end. Use this for smoother, more balanced transitions.

A. Ease-In: Cubic-Bezier (0.5, 0, 1, 1), B. Ease-Out: Cubic-Bezier (0, 0, 0.5, 1), C. Ease-In-Out: Cubic-Bezier (0.35, 0, 0.35, 1)

Anticipation

Anticipation, when used, happens at the start of an animation and prepares users for the main movement. Just as a person bends their knees and pulls their arms back before jumping to build momentum, anticipation adds a sense of natural motion.

You can apply this principle to microanimations as well. For example, when a message toast disappears, it might start in its original position (A), briefly move upward (B), and then slide down off the screen (C).

Toast message microanimation with anticipation

Overshoot / Bounce

Overshoot, also called bounce, happens at the end of an animation and helps simulate a more natural stop. Instead of coming to an abrupt halt, the motion goes slightly beyond its final position before settling – similar to the way a hammer bounces slightly after hitting the ground.

Example: Message toast

The component enters from the bottom and moves upward quickly (A). Just before it reaches its final position, it goes a bit too far (B), then settles back into place (C).

Toast message microanimation with overshoot (bounce)

Guiding Principles

Continuity

Animations rarely start and end all at once. Instead, they usually play in a sequence, creating a more natural and understandable flow. This technique, often called choreography, helps guide the user's attention and supports storytelling within the interface. When you time animations one after another, instead of all at once, transitions feel more intentional and meaningful.

Use tools like delay and offset to control when each animation starts in relation to others. This approach helps animations support the user journey without overwhelming users or distracting from the content.

Spatial Relationship

When elements move on the screen, it should never feel random. There should always be a clear reason for the motion. Animations bridge the visual gap between where something comes from and where it's going. For example, when a card expands and shifts to the center of the screen, the movement makes the transition easier to follow and helps users understand the spatial connection between states.

Keep these key principles in mind:

• Information architecture and hierarchy: Make sure elements follow a logical structure. If a new element is related to a parent, animate it from or to the parent’s position.
• Source of information: Reflect an element's origin through its movement. This helps users see where new information comes from and where it goes.
• Flow of focal points: In more complex animations, guide the user's attention through the sequence. Use motion to support clarity, not create chaos.

Personality

Motion is one way we bring the personality of our design system to life. It should feel relatable, smart, encouraging, and trustworthy. Build on the core animation principles to introduce unique movements that reflect these qualities in subtle but meaningful ways.

Related Links