| motion.md (492875622b39cb2cf04bbb9248b6ed0c52ced2df) | motion.md (7385e139b0c9efca7430458cee982e63e282f4ae) |
|---|---|
| 1# Motion | 1# Motion |
| 2 |
|
| 2The motion guidelines are based on Carbon Design System guidelines. These 3guidelines avoid easing curves that are unnatural, distracting, or purely | 3The motion guidelines are based on Carbon Design System guidelines. These 4guidelines 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/). | 5decorative. 6[The documentation below is attributed to Carbon's animation documentation](https://www.carbondesignsystem.com/guidelines/motion/basics/). |
| 6 | 7 |
| 7 | |
| 8## Easing 9 10### Productive motion | 8## Easing 9 10### Productive motion |
| 11 |
|
| 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 | 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 |
|
| 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 | 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 |
|
| 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 | 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 |
|
| 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 | 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 |
|
| 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``` | 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``` |