Guidelines for swipe animations
Use swipe animations when you implement the swipe gesture for selection of an item.
Recommendations
- 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 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 (XAML)
Quickstart: Animating your UI using library animations
For developers (HTML)
WinJS.UI.Animation.swipeReveal function