Guidelines for swipe animations

Applies to Windows and Windows Phone

Use swipe animations when you implement the swipe gesture for selection of an item.

Dos and don'ts

  • If the user did not drag the item far enough to toggle the selection state before it was released, use the swipe select animation to move the item back to its rest position without changing the selection state.
  • Make sure the direction of the swipe animation matches the direction of the user's swipe gesture.
    • In the case of horizontally scrolling content, the swipe direction is vertical, so the swipe animation sequence should move down and then back up.
    • In the case of vertically scrolling content, the swipe direction is horizontal, so the swipe animation sequence should move horizontally according to the reading order of the app.
      • For an app with a left-to-right reading order, the animation should move right and then left.
      • For an app with a right-to-left reading order, the animation should move left and then right.
  • Move the item the recommended distance for swipe animations, which is 15 pixels if moving vertically or 23 pixels if moving horizontally.

Related topics

For designers
Guidelines for add and delete
Guidelines for content transitions animations
Guidelines for drag 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 (HTML)
HTML animation library sample
Animating your UI
Animating swipe gestures
WinJS.UI.Animation.swipeReveal function
WinJS.UI.Animation.swipeSelect function
WinJS.UI.Animation.swipeDeselect function
For developers (XAML)
Animating your UI
Animating swipe gestures
Quickstart: Animating your UI using library animations
SwipeHintThemeAnimation class
SwipeBackThemeAnimation class

 

 

Show:
© 2014 Microsoft