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