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 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 (XAML)
- Animating your UI
- Animating swipe gestures
- Quickstart: Animating your UI using library animations
- SwipeHintThemeAnimation class
- SwipeBackThemeAnimation class
- 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
Show: