1# Motion
2
3The motion guidelines are based on Carbon Design System guidelines. These
4guidelines avoid easing curves that are unnatural, distracting, or purely
5decorative.
6[The documentation below is attributed to Carbon's animation documentation](https://www.carbondesignsystem.com/guidelines/motion/basics/).
7
8## Easing
9
10### Productive motion
11
12Productive motion creates a sense of efficiency and responsiveness, while
13remaining subtle and out of the way. Productive motion is appropriate for
14moments when the user needs to focus on completing tasks.
15
16### Expressive motion
17
18Expressive motion delivers enthusiastic, vibrant, and highly visible movement.
19Use expressive motion for significant moments such as opening a new page,
20clicking the primary action button, or when the movement itself conveys a
21meaning. System alerts and the appearance of notification boxes are great cases
22for expressive motion.
23
24### Easing tokens
25
26```
27$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
28$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
29$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);
30$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);
31$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);
32$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
33```
34
35## Duration
36
37Duration is calculated based on the style and size of the motion. Among the two
38motion styles, productive motion is significantly faster than expressive motion.
39Motion’s duration should be dynamic based on the size of the animation; the
40larger the change in distance (traveled) or size (scaling) of the element, the
41longer the animation takes.
42
43### Duration tokens
44
45```
46$duration--fast-01: 70ms; //Micro-interactions such as button and toggle
47$duration--fast-02: 110ms; //Micro-interactions such as fade
48$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
49$duration--moderate-02: 240ms; //Expansion, system communication, toast
50$duration--slow-01: 400ms; //Large expansion, important system notifications
51$duration--slow-02: 700ms; //Background dimming
52```
53