Skip to content
Snippets Groups Projects
Commit c2410c48 authored by Allison Whilden's avatar Allison Whilden
Browse files

[ci skip] UX Guide: add moving transition animation guidance

parent fdc944e0
No related branches found
No related tags found
No related merge requests found
Loading
Loading
@@ -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
doc/development/ux_guide/img/animation-autoscroll.gif

295 KiB

doc/development/ux_guide/img/animation-reorder.gif

68.9 KiB

0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment