summaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorDerick Montague <derick.montague@ibm.com>2020-04-15 00:10:24 +0300
committerDerick Montague <derick.montague@ibm.com>2020-05-12 21:01:18 +0300
commit221b3187a521a87611d9dbed2c96e3212d04e590 (patch)
tree53ba17903ceeeb66756bb22c2f618b5d7fd4353c /docs
parent8fc53ad94d61372fe5fd2bd96378c2fb1fd0f1f9 (diff)
downloadwebui-vue-221b3187a521a87611d9dbed2c96e3212d04e590.tar.xz
Add motion guidelines
- Update transition global variables in bootstrap to use Carbon motion easing and duration tokens to maintain consistency throughout the application - Remove import of colors helper file into variables and set import order based on dependency Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: Ibd3fb9438ff236670e5523250d284b59411a7e53
Diffstat (limited to 'docs')
-rw-r--r--docs/.vuepress/config.js1
-rw-r--r--docs/guide/guidelines/motion.md34
2 files changed, 35 insertions, 0 deletions
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index a07000e8..8f94ff5b 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -37,6 +37,7 @@ module.exports = {
children: [
"/guide/guidelines/",
"/guide/guidelines/colors",
+ "/guide/guidelines/motion",
"/guide/guidelines/typography"
]
},
diff --git a/docs/guide/guidelines/motion.md b/docs/guide/guidelines/motion.md
new file mode 100644
index 00000000..22450f1d
--- /dev/null
+++ b/docs/guide/guidelines/motion.md
@@ -0,0 +1,34 @@
+# 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/).
+
+
+## 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 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);
+$entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);
+$entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);
+$exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);
+$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 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
+$duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
+$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