Papa's Perspective

Windows 8 Animations Library Creates Better User Experiences

Windows 8 has great built-in animations, which can draw users deeper into your app.

Earlier this month Microsoft put Windows 8 Metro style apps on display at the Build conference in Anaheim, CA. I had the pleasure of presenting a session on styling, animations, and templating for Metro style apps using XAML. I was excited to present my session, for many reasons, but what really stood out to me: the way animations have been given first-class status in Windows 8.

Windows 8 is the best attempt I've seen to date to make them first class and simple to use while providing an immersive experience. Why are the new animations so important and compelling to me? Consider some of the best uses of animations you've experienced: They feel fluid; make the app flow from one state to another; provide subtle transitions between states just long enough to feel good, but not too long to detract from the experience. There's a fine balance between creating a great user experience with animations and creating today's equivalent of the blink tag. When used wisely, animations create a great user experience, which can translate to the user spending more time in your app.

What goes into great animations? There are a couple of factors to consider, including the code to create the animation, the durations, the actual transitions of state and elements, easings and much more. One reason I think Windows 8 hits a home run with animations is how easy they make it for the developer to replicate the built-in Windows animations in their apps.

Duration, Translation, Opacity and Easing

Notice how smoothly the elements animate when you select a collection of photos in Windows 8's Memories app? Breaking it down, these animations mostly use duration, translation, opacity and easing.

  • The duration is the amount of time the animation takes (or possibly each aspect of the animation has its own duration).
  • The translation of elements from x1, y1 to x2, y2 provides the movement.
  • The opacity allows the elements to animate to become more or less opaque.
  • The easing allows the animations to avoid using linear and static animations, and instead use dynamic and more realistic motion.

Sounds easy, but finding the right combination isn't always easy. Windows 8 has some great animations baked in; even better, developers can take advantage of the animations themselves using the Animations Library. The Animation Library is available for XAML or HTML5/JavaScript-based Metro style apps.

Let's assume you're creating an app with a page full of content. When you load this content, you may want it to load using the same animation Windows uses to load content on entrance. You could easily get this effect by applying an entrance animation transition to your container. The best way to understand the value of the Animation Library is perhaps to compare how this would be done without the Animations Library. Instead of applying just a few lines of XAML (or a CSS class), you could write an elaborate storyboard or set of visual states to achieve the animation. It could be done, but it would take many more lines of code and in some cases not be as performant.

The Animations Library provides three big advantages here:

  • You can use the same animations Windows 8 uses, making your app flow smoothly with Windows 8, and thus immersing the user into the experience.
  • The animations can be applied with one to three lines of XAML in many cases.
  • The animations in the Animation Library are guaranteed to be highly performant.

Same Experience, Less Code

I show a great example of the value of the Animations Library in my session from Build. I first demonstrated an app that uses storyboards and visual states extensively for animations. Then I commented out about 50 lines of XAML and replaced it with just the few needed to apply an animation from the Animation Library. When running the app, the user sees the same results: a fast, performant animation, but this time with a fraction of the code.

I love to present and share ideas with developers. Some topics get me more excited than others; it's just human nature. But with the Animations Library, I got excited over how easy it's becoming to provide great user experiences.

About the Author

John Papa is a Microsoft Regional Director and former Microsoft technical evangelist. Author of 100-plus articles and 10 books, he specializes in professional application development with Windows, HTML5, JavaScript, CSS, Silverlight, Windows Presentation Foundation, C#, .NET and SQL Server. Check out his online training with Pluralsight; find him at and on Twitter at

comments powered by Disqus


  • GitHub Copilot for Azure Gets Preview Glitches

    This reporter, recently accepted to preview GitHub Copilot for Azure, has thus far found the tool to be, well, glitchy.

  • New .NET 9 Templates for Blazor Hybrid, .NET MAUI

    Microsoft's fifth preview of .NET 9 nods at AI development while also introducing new templates for some of the more popular project types, including Blazor Hybrid and .NET MAUI.

  • What's Next for ASP.NET Core and Blazor

    Since its inception as an intriguing experiment in leveraging WebAssembly to enable dynamic web development with C#, Blazor has evolved into a mature, fully featured framework. Integral to the ASP.NET Core ecosystem, Blazor offers developers a unique combination of server-side rendering and rich client-side interactivity.

  • Nearest Centroid Classification for Numeric Data Using C#

    Here's a complete end-to-end demo of what Dr. James McCaffrey of Microsoft Research says is arguably the simplest possible classification technique.

  • .NET MAUI in VS Code Goes GA

    Visual Studio Code's .NET MAUI workload, which evolves the former Xamarin.Forms mobile-centric framework by adding support for creating desktop applications, has reached general availability.

Subscribe on YouTube