Windows Dev Center

Guidelines for drag animations

[This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF .]

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.

Recommendations

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.
  • 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.
  • Use the drag end animation in combination with add and delete animations for lists.
  • 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 need to 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 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
For developers (XAML)
Animating your UI
Animating drag-and-drop sequences
Quickstart: Animating your UI using library animations
DragItemThemeAnimation class
DropTargetItemThemeAnimation class
DragOverThemeAnimation class
For developers (HTML)
HTML animation library sample
Animating your UI
Animating drag-and-drop sequences
dragSourceEnd function
dragSourceStart function
dragBetweenLeave function
dragBetweenEnter function

 

 

Show:
© 2015 Microsoft