This sample shows how to use the Animation Library APIs. These functions provide you with the ability to use animations in your Windows Store apps and custom controls that are consistent with animations used by Windows.

The sample demonstrates the following animation scenarios:

This sample is written in HTML, CSS, and JavaScript. For the XAML version, see the XAML personality animations sample and the XAML animations sample.

To obtain an evaluation copy of Windows 8.1, go to Windows 8.1.

To obtain an evaluation copy of Microsoft Visual Studio 2013, go to Visual Studio 2013.

Note  For Windows 8 app samples, download the Windows 8 app samples pack. The samples in the Windows 8 app samples pack will build and run only on Microsoft Visual Studio 2012.

Related topics

Concepts
Animating your UI with the Animation Library
Reference
createAddToListAnimation
createAddToSearchListAnimation
createCollapseAnimation
createDeleteFromListAnimation
createDeleteFromSearchListAnimation
createExpandAnimation
createPeekAnimation
createRepositionAnimation
crossFade
disableAnimations
dragBetweenEnter
dragBetweenLeave
dragSourceEnd
dragSourceStart
enableAnimations
enterContent
enterPage
executeAnimation
executeTransition
exitContent
exitPage
fadeIn
fadeOut
hideEdgeUI
hidePanel
hidePopup
isAnimationEnabled
pointerDown
pointerUp
showEdgeUI
showPanel
showPopup
swipeDeselect
swipeReveal
swipeSelect
updateBadge
Samples
Windows 8 Windows Store app samples

Operating system requirements

Client
Windows 8.1
Server
Windows Server 2012 R2

Build the sample

  1. Download the sample's .zip file using one of the buttons near the top of the page.
  2. Unzip the downloaded file into a folder on your computer.
  3. Start Visual Studio 2013 and select File > Open > Project/Solution.
  4. Go to the folder where you unzipped the sample.
  5. Find and open the folder named for the sample and one of its programming language subfolders (C#, JS.
  6. Double-click the Microsoft Visual Studio Solution (.sln) file to open it.
  7. Select Build > Build Solution to build the sample.

Run the sample

To debug the app and then run it, press F5 or use Debug > Start Debugging. To run the app without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.

How to use the sample

Each scenario instructs you about what to watch for and how to launch each animation.

Be aware that the badge and tile update scenarios are examples only and do not show the actual mechanisms behind sending badge and tile notifications, only the animation that occurs when a badge or tile notification arrives. For more information about notifications, see Tile, badges, and notifications.