summaryrefslogtreecommitdiff
path: root/docs/guide/guidelines/motion.md
diff options
context:
space:
mode:
authorPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
committerPatrick Williams <patrick@stwcx.xyz>2022-12-08 15:13:13 +0300
commit7385e139b0c9efca7430458cee982e63e282f4ae (patch)
tree1bbdb0164e556b76eec72cb558c66974c8f95dd8 /docs/guide/guidelines/motion.md
parentb24a483eda5ca0b0ecdb4f0c61b90d76d0d8e1e0 (diff)
downloadwebui-vue-7385e139b0c9efca7430458cee982e63e282f4ae.tar.xz
prettier: re-format
Prettier is enabled in openbmc-build-scripts on Markdown, JSON, and YAML files to have consistent formatting for these file types. Re-run the formatter on the whole repository. Change-Id: I2804ee3ab5ff6bcbf986b028db2fafec8e616779 Signed-off-by: Patrick Williams <patrick@stwcx.xyz>
Diffstat (limited to 'docs/guide/guidelines/motion.md')
-rw-r--r--docs/guide/guidelines/motion.md13
1 files changed, 9 insertions, 4 deletions
diff --git a/docs/guide/guidelines/motion.md b/docs/guide/guidelines/motion.md
index 4e176293..8ec9f5b7 100644
--- a/docs/guide/guidelines/motion.md
+++ b/docs/guide/guidelines/motion.md
@@ -1,18 +1,20 @@
# Motion
+
The motion guidelines are based on Carbon Design System guidelines. These
guidelines avoid easing curves that are unnatural, distracting, or purely
-decorative. [The documentation below is attributed to Carbon's animation
-documentation](https://www.carbondesignsystem.com/guidelines/motion/basics/).
-
+decorative.
+[The documentation below is attributed to Carbon's animation documentation](https://www.carbondesignsystem.com/guidelines/motion/basics/).
## Easing
### Productive motion
+
Productive motion creates a sense of efficiency and responsiveness, while
remaining subtle and out of the way. Productive motion is appropriate for
moments when the user needs to focus on completing tasks.
### Expressive motion
+
Expressive motion delivers enthusiastic, vibrant, and highly visible movement.
Use expressive motion for significant moments such as opening a new page,
clicking the primary action button, or when the movement itself conveys a
@@ -20,6 +22,7 @@ meaning. System alerts and the appearance of notification boxes are great cases
for expressive motion.
### Easing tokens
+
```
$standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
$standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
@@ -30,6 +33,7 @@ $exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
```
## Duration
+
Duration is calculated based on the style and size of the motion. Among the two
motion styles, productive motion is significantly faster than expressive motion.
Motion’s duration should be dynamic based on the size of the animation; the
@@ -37,6 +41,7 @@ larger the change in distance (traveled) or size (scaling) of the element, the
longer the animation takes.
### Duration tokens
+
```
$duration--fast-01: 70ms; //Micro-interactions such as button and toggle
$duration--fast-02: 110ms; //Micro-interactions such as fade
@@ -44,4 +49,4 @@ $duration--moderate-01: 150ms; //Micro-interactions, small expansion, short dist
$duration--moderate-02: 240ms; //Expansion, system communication, toast
$duration--slow-01: 400ms; //Large expansion, important system notifications
$duration--slow-02: 700ms; //Background dimming
-``` \ No newline at end of file
+```