animation.md

Animation

Siemens iX uses meaningful animations to make applications appear physically tangible. This way UIs become predictable and interactions easier to follow along with for users.
Abrupt state changes are prevented in oder to make UIs feel smooth and anchored in reality.

---

Standard timings

If an animation is too slow it can feel sluggish and disturb efficient workflows.
In contrast an animation that runs too fast can be irritating and stressful.
Therefore it is important to choose the correct timing for the respective situation.

default-time: 150 ms

• all mouse state changes e.g. normal <-> hover <-> active/pressed
• showing and hiding of small UI elements

medium-time: 300 ms

• e.g. moving or fading complex components or multiple small elements

slow-time: 500 ms

• e.g. moving or fading larger screen elements

xslow-time: 1000 ms

• e.g. moving or fading entire screen parts

Acceleration & Deceleration

• Objects should move in a learned physical way, objects have mass and don't start or stop immediately, they accelerate and decelerate
• use ease-in and ease-out to accelerate and decelerate objects
• Slide-in movements (from off screen) should use ease-out only
• Slide-out movements (to off screen) should use ease-in only
• transformations or translations within the screen (object is visisble the whole time) should use ease-in-out
• hiding or appearing objects (opacity) use linear transitions as there is no mass to accelerate/decelerate

---

Animation timing variables

All animation timing values are also available through SASS variables:

$x-slow-time: 1s;
$slow-time: 500ms;
$medium-time: 300ms;
$default-time: 150ms;
$short-time: 0ms;

Usage example:

@import '@siemens/ix/scss/common-variables';

transition: $default-time;