diff --git a/doc/development/ux_guide/animation.md b/doc/development/ux_guide/animation.md
index daeb15460c2ce83b5ce3f1fe7e58c659dd5d761b..903e54bf9dc1cccf0b5031f906fc55629e998fb6 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 0000000000000000000000000000000000000000..155b0234c6463c7728020d101bae0e67e1d89dac
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 0000000000000000000000000000000000000000..ccdeb3d396f68179407081384e846b82698dc826
Binary files /dev/null and b/doc/development/ux_guide/img/animation-reorder.gif differ