From c2410c48a19cf541832cb726262907670ca7860a Mon Sep 17 00:00:00 2001 From: Allison Whilden Date: Fri, 16 Dec 2016 09:01:53 -0800 Subject: [ci skip] UX Guide: add moving transition animation guidance --- doc/development/ux_guide/animation.md | 17 ++++++++++++++++- doc/development/ux_guide/img/animation-autoscroll.gif | Bin 0 -> 302217 bytes doc/development/ux_guide/img/animation-reorder.gif | Bin 0 -> 70515 bytes 3 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 doc/development/ux_guide/img/animation-autoscroll.gif create mode 100644 doc/development/ux_guide/img/animation-reorder.gif (limited to 'doc') 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 Binary files /dev/null and b/doc/development/ux_guide/img/animation-autoscroll.gif 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 Binary files /dev/null and b/doc/development/ux_guide/img/animation-reorder.gif differ -- cgit v1.2.1