Setting up your first use of the Animation library in WinJS

The WinJS Animation library provides some pre-scripted animation functions that allow you to easily reproduce the signature animations of Metro-style apps.  Since there is no “Animated Application” template (and I don’t think there should be).  I thought I’d share the first couple of steps needed to use the library in your own application.

1. Create a new JavaScript (Blank Application) Project in VS11 Express.

2. In default.html, add an element to be animated.  I chose a header taking advantage of the provided classes of the theme CSS.

3. Next add a reference to the Animation library which is defined in the “animations.js” file under the “winjs/js” folder.  Additionally if you open this file, you will find in the comments at the top that this library is dependent on the “base.js” file and the “ui.js” file.  The first file is already referenced but “ui.js” needs to be added.  Add the references to your default.html file, like the following:

4. Switch over to default.js, and in the onmainwindowactivated method add the following code to locate the element and run the page enter animation.

Its important to notice the namespace is “Animation” and not “Animations”.  One reason I was prompted to write this post is because the Windows 8 dev center example code erroneously uses “Animations”. Certinaly frustrating when you’re just getting started.

Run. Run the example and you should see after the app starts up, the page title slides into view with a short animation.

What about chaining a second animation after this first animation? Since animation functions return promises its very easy to do so.  Check it out.

5. Add another element below your first in default.html. Let’s use the fadeIn function this time, so set the opacity to “0”.

6. Now go back to default.js and add a then call on enterPage. Inside define a function that locates the second element and calls fadeIn.

Run.  Now when you run the app, after the page title slides in, the paragraph below should fade in to view.

And that’s it to getting started! If you look at the WinJS.UI.Animation namespace you’ll find the other available scripted animations.

Looking through the “animations.js” file, I found it interesting to note that the available functions actually make a call to the Win.UI.executeTransition function, so if you’re looking to run some custom animations you can do that too.

I’m sure I’ll be posting more about the Animations library soon.  I’m not sure what everything does yet, but it sure is fun to poke around.

This entry was posted in Client Technologies, Tutorials and tagged , , , . Bookmark the permalink.

8 Responses to Setting up your first use of the Animation library in WinJS

  1. firstraa says:

    thanks i will try it!

  2. Pingback: Windows Client Developer Roundup 086 for 1/11/2012 - Pete Brown's 10rem.net

  3. Pingback: Setting up your first use of the Animation library in WinJS « Silverlight News

  4. Dathan says:

    Can the WinJS library be used in Web Development?

  5. Adam Kinney says:

    You could, but you’d have to do a fair amount of work to workaround or cover up all of the places that WinRT functions are expected. The WinJS library expects to be running on within the context of a Metro app.

  6. Dathan says:

    Okay thanks. You should probably mention that this requires Windows 8. I struggled to set it up in Windows 7 then discovered that the WinRT works on Win8 only. I’m wanting to use to the WinJS animation library in a metro-style website but it doesn’t look like it’ll work.

  7. GiUmaTo says:

    Couple of typo I guess:

    is “Animation” and “Animations” –>
    is “Animation” and not “Animations”

    return promises its very to do so. –>
    return promises it’s very easy to do.

    found it interesting to not that –>
    found it interesting to note that

  8. Adam Kinney says:

    Thanks for the typos report, GiUmaTo! I must have been in a hurry on this one…:)

Leave a Reply