summaryrefslogtreecommitdiff
path: root/doc
diff options
context:
space:
mode:
authorAnnabel Dunstone Gray <annabel.dunstone@gmail.com>2016-12-28 14:34:29 +0000
committerAnnabel Dunstone Gray <annabel.dunstone@gmail.com>2016-12-28 14:34:29 +0000
commit8afe8fb463e405f7fd2f1f344d8f2491067e74cc (patch)
tree8ded882b72f1a2e7dce3b379f68ea2e6669fa8c9 /doc
parent0499431ab9fa90abe3fa46f4e45dafa442fe227b (diff)
parentc2410c48a19cf541832cb726262907670ca7860a (diff)
downloadgitlab-ce-8afe8fb463e405f7fd2f1f344d8f2491067e74cc.tar.gz
Merge branch 'ux-guide-scroll-animation' into 'master'
UX Guide: add moving transition animation guidance See merge request !8147
Diffstat (limited to 'doc')
-rw-r--r--doc/development/ux_guide/animation.md17
-rw-r--r--doc/development/ux_guide/img/animation-autoscroll.gifbin0 -> 302217 bytes
-rw-r--r--doc/development/ux_guide/img/animation-reorder.gifbin0 -> 70515 bytes
3 files changed, 16 insertions, 1 deletions
diff --git a/doc/development/ux_guide/animation.md b/doc/development/ux_guide/animation.md
index daeb15460c2..903e54bf9dc 100644
--- a/doc/development/ux_guide/animation.md
+++ b/doc/development/ux_guide/animation.md
@@ -39,4 +39,19 @@ When information is updating in place, a quick, subtle animation is needed. The
![Quick update animation](img/animation-quickupdate.gif)
-> TODO: Add guidance for other kinds of animation \ No newline at end of file
+### Moving transitions
+
+When elements move on screen, there should be a quick animation so it is clear to users what moved where. The timing of this animation differs based on the amount of movement and change. Consider animations between `200ms` and `400ms`.
+
+#### Shifting elements on reorder
+An example of a moving transition is when elements have to move out of the way when you drag an element.
+
+View the [interactive example](http://codepen.io/awhildy/full/ALyKPE/) here.
+
+![Reorder animation](img/animation-reorder.gif)
+
+#### Autoscroll the page
+Another example of a moving transition is when you have to autoscroll the page to keep an active element visible.
+
+View the [interactive example](http://codepen.io/awhildy/full/PbxgVo/) here.
+![Autoscroll animation](img/animation-autoscroll.gif) \ No newline at end of file
diff --git a/doc/development/ux_guide/img/animation-autoscroll.gif b/doc/development/ux_guide/img/animation-autoscroll.gif
new file mode 100644
index 00000000000..155b0234c64
--- /dev/null
+++ b/doc/development/ux_guide/img/animation-autoscroll.gif
Binary files differ
diff --git a/doc/development/ux_guide/img/animation-reorder.gif b/doc/development/ux_guide/img/animation-reorder.gif
new file mode 100644
index 00000000000..ccdeb3d396f
--- /dev/null
+++ b/doc/development/ux_guide/img/animation-reorder.gif
Binary files differ