Guidelines for drag animations

Applies to Windows and Windows Phone

Use drag-and-drop animations when users move objects., such as moving an item within a list, or dropping an item on top of another.

Dos and don'ts

Drag start animation

  • Use the drag start animation when the user begins to move an object.
  • Include affected objects in the animation if and only if there are other objects that can be affected by the drag-and-drop operation.
  • Allow the user to move the object somewhat before you trigger the drag start animation. This will prevent the user from accidentally dragging an object that they only meant to tap or select. The recommended threshold is 20 touch independent pixels (TIPs).
  • Use the drag end animation to complete any animation sequence that began with the drag start animation. This reverses the size change in the dragged object that was caused by the drag start animation.

Drag end animation

  • Use the drag end animation when the user drops a dragged object.
  • When the user drops an object to reorder a list, you must often reposition the other items in the list to make room for the item being dropped. To do so, after the drag end animation is complete, use the list animation for adding an item but with no added item. The item being added is already present. This will animate all elements into their proper positions.
  • If the drag source will disappear after being dropped (for example, when the user drops a file onto a folder icon to store the file in that folder), use the fade out animation on the drag source.
  • Include affected objects in the drag end animation if and only if you included those same affected objects in the drag start animation.
  • Don't use the drag end animation if you have not first used the drag start animation. You must use both animations to return objects to their original sizes after the drag sequence is complete.

Drag between enter animation

  • Use the drag between enter animation when the user drags the drag source into a drop area where it can be dropped between two other objects.
  • Choose a reasonable drop target area. This area should not be so small that it is difficult for the user to position the drag source for the drop.
  • The recommended distance to move affected objects to show the drop area is 40 pixels.
  • The recommended direction to move affected objects to show the drop area is directly apart from each other. Whether they move vertically or horizontally depends on the orientation of the affected objects to each other.
  • Don't use the drag between enter animation if the drag source cannot be dropped in an area. The drag between enter animation tells the user that the drag source can be dropped between the affected objects.

Drag between leave animation

  • Use the drag between leave animation when the user drags an object away from an area where it could have been dropped between two other objects.
  • Don't use the drag between leave animation if you have not first used the drag between enter animation.

Related topics

For designers
Guidelines for add and delete
Guidelines for content transitions animations
Guidelines for edge-based UI animations
Guidelines for fade animations
Guidelines for page transitions animations
Guidelines for pointer click animations
Guidelines for reposition animations
Guidelines for pop-up UI animations
Guidelines for swipe animations
For developers (HTML)
HTML animation library sample
Animating your UI
Animating drag-and-drop sequences
dragSourceEnd
dragSourceStart
dragBetweenLeave
dragBetweenEnter
For developers (XAML)
Animating your UI
Animating drag-and-drop sequences
Quickstart: Animating your UI using library animations
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation

 

 

Show:
© 2014 Microsoft