This topic describes best practices for the swipe animations.
Appropriate use of the swipe animations
- 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.
- The direction of the swipe animation should match 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.
- The recommended distance to move the item as part of the swipe animation is 15 pixels if moving vertically or 23 pixels if moving horizontally.
Checklist
For general Windows Store requirements, see Certification requirements for Windows apps.
Related topics
- Using the Animation Library animations sample
- JavaScript and HTML:
- Animating your UI (Windows Store apps using JavaScript and HTML)
- Animating swipe gestures (Windows Store apps using JavaScript and HTML)
- swipeReveal
- swipeSelect
- swipeDeselect
- C#/VB/C++ and XAML:
- Animating your UI (Windows Store apps using C#/VB/C++ and XAML)
- Animating swipe gestures (Windows Store apps using C#/VB/C++ and XAML)
- Quickstart: Animating your UI (Windows Store apps using C#/VB/C++ and XAML)
- SwipeHintThemeAnimation
- SwipeBackThemeAnimation
Build date: 3/5/2013
