Animating swipe gestures (HTML)

  • Article

Use swipe animations when you implement the Windows 8 touch selection model (called a swipe) for the selection of an item.

This set of animations consists of the following APIs. All three of these animations must be used when you implement the swipe interaction:

The following video demonstrates the swipe reveal animation:

The following video demonstrates the swipe select and deselect animations:

Note

The ListView control includes touch selection and the swipe animations, so you do not need to implement these animations when you use that control.

 

Swipe select

Use the swipe select animation when the user drags an item that supports swipe selection. The user must drag the item far enough to select it, and then releases it. The swipe select animation adds the selection indicator (often a check mark) that shows the "selected" state on the item and moves the item back to its rest position.

Illustration showing the steps in a swipe select animation: move and check

To use this animation, you need to know the selection indicator that will be shown and the direction and distance of the animation.

Swipe deselect

Use the swipe deselect animation when the user drags a currently selected item far enough to deselect it and then releases the item. The swipe deselect animation removes the selection indicator from the item and moves the item back to its rest position.

Illustration showing the steps in a swipe deselect animation: move and uncheck

To use this animation, you need to know the selection indicator that will be hidden and the direction and distance of the animation.

Swipe reveal

Use the swipe reveal animation to show the user that the item supports the swipe interaction. When the user presses and holds an item that supports the swipe interaction, the animation moves the item down and then back up, as a hint that the item supports the swipe interaction.

Illustration showing the steps in a swipe reveal animation: move and uncheck

To use this animation, you need to know the direction and distance of the animation. The animation must be played twice sequentially, first to move the item in the specified direction, and then again to move the item back to the rest position.

Other resources

For code examples that demonstrate the use of the swipe animation APIs, see the HTML animation library sample.

Animating your UI

swipeReveal

swipeSelect

swipeDeselect