1221b3187SDerick Montague# Motion 2*7385e139SPatrick Williams 349287562SDerick MontagueThe motion guidelines are based on Carbon Design System guidelines. These 449287562SDerick Montagueguidelines avoid easing curves that are unnatural, distracting, or purely 5*7385e139SPatrick Williamsdecorative. 6*7385e139SPatrick Williams[The documentation below is attributed to Carbon's animation documentation](https://www.carbondesignsystem.com/guidelines/motion/basics/). 7221b3187SDerick Montague 8221b3187SDerick Montague## Easing 9221b3187SDerick Montague 10221b3187SDerick Montague### Productive motion 11*7385e139SPatrick Williams 1249287562SDerick MontagueProductive motion creates a sense of efficiency and responsiveness, while 1349287562SDerick Montagueremaining subtle and out of the way. Productive motion is appropriate for 1449287562SDerick Montaguemoments when the user needs to focus on completing tasks. 15221b3187SDerick Montague 16221b3187SDerick Montague### Expressive motion 17*7385e139SPatrick Williams 1849287562SDerick MontagueExpressive motion delivers enthusiastic, vibrant, and highly visible movement. 1949287562SDerick MontagueUse expressive motion for significant moments such as opening a new page, 2049287562SDerick Montagueclicking the primary action button, or when the movement itself conveys a 2149287562SDerick Montaguemeaning. System alerts and the appearance of notification boxes are great cases 2249287562SDerick Montaguefor expressive motion. 23221b3187SDerick Montague 24221b3187SDerick Montague### Easing tokens 25*7385e139SPatrick Williams 26221b3187SDerick Montague``` 27221b3187SDerick Montague$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9); 28221b3187SDerick Montague$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1); 29221b3187SDerick Montague$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9); 30221b3187SDerick Montague$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1); 31221b3187SDerick Montague$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9); 32221b3187SDerick Montague$exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1); 33221b3187SDerick Montague``` 34221b3187SDerick Montague 35221b3187SDerick Montague## Duration 36*7385e139SPatrick Williams 3749287562SDerick MontagueDuration is calculated based on the style and size of the motion. Among the two 3849287562SDerick Montaguemotion styles, productive motion is significantly faster than expressive motion. 3949287562SDerick MontagueMotion’s duration should be dynamic based on the size of the animation; the 4049287562SDerick Montaguelarger the change in distance (traveled) or size (scaling) of the element, the 4149287562SDerick Montaguelonger the animation takes. 42221b3187SDerick Montague 43221b3187SDerick Montague### Duration tokens 44*7385e139SPatrick Williams 45221b3187SDerick Montague``` 46221b3187SDerick Montague$duration--fast-01: 70ms; //Micro-interactions such as button and toggle 47221b3187SDerick Montague$duration--fast-02: 110ms; //Micro-interactions such as fade 48221b3187SDerick Montague$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements 49221b3187SDerick Montague$duration--moderate-02: 240ms; //Expansion, system communication, toast 50221b3187SDerick Montague$duration--slow-01: 400ms; //Large expansion, important system notifications 51221b3187SDerick Montague$duration--slow-02: 700ms; //Background dimming 52221b3187SDerick Montague``` 53