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:
- Bringing an entire page onto the screen, all at one time or as separate parts (enterPage)
- Transitioning between pages (enterPage/exitPage)
- Bringing partial page content onto the screen (enterContent)
- Transitioning partial page content (enterContent/exitContent)
- Expanding a set of elements to make room for new element, and collapsing the original elements when the new element is removed (createExpandAnimation/createCollapseAnimation)
- Animating a touch or mouse click response (pointerUp/pointerDown)
- Adding and removing a list item (createAddToListAnimation/createDeleteToListAnimation)
- Filtering a list of search results (createAddToSearchListAnimation/createDeleteFromSearchListAnimation)
- Fading content in and out (fadeIn/fadeOut)
- Crossfading an element in place (crossFade)
- Moving an element to a new location (createRepositionAnimation)
- Dragging and dropping an element (dragSourceStart/dragSourceEnd)
- Repositioning elements to allow an element to be dropped and restoring those elements when it is not (dragBetweenEnter/dragBetweenLeave)
- Showing and hiding pop-up UI (showPopup/hidePopup)
- Showing and hiding edge-based UI (showEdgeUI/hideEdgeUI)
- Showing and hiding a panel (showPanel/hidePanel)
- Revealing whether an item supports swipe (swipeReveal)
- Reacting to a swipe to select or deselect an item (swipeSelect/swipeDeselect)
- Updating a badge in response to a badge notification (updateBadge)
- Updating a tile in response to a tile notification (createPeekAnimation)
- Running custom CSS animations and transitions (executeAnimation/executeTransition)
- Enabling/disabling animations and checking whether animations are enabled (enableAnimations/disableAnimations/isAnimationEnabled)
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 | |
|---|---|
| Server |
Build the sample
- Download the sample's .zip file using one of the buttons near the top of the page.
- Unzip the downloaded file into a folder on your computer.
- Start Visual Studio 2013 and select File > Open > Project/Solution.
- Go to the folder where you unzipped the sample.
- Find and open the folder named for the sample and one of its programming language subfolders (C#, JS.
- Double-click the Microsoft Visual Studio Solution (.sln) file to open it.
- 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.