Using Animations in Javascript Metro Apps RRS feed

  • Question

  • So I worked through the tutorial on navigation and fragments located here:


    and i get it, great tutorial. Where I am having problems is locating a tutorial that explains how to animate fragments. Ive watched the BUILD conference video on it, but they kind of missed/skipped through the points I need to get from what that above tutorial teaches, to getting animations between fragments working.

    If anyone can point me in the right direction It would be greatly appreciated.

    Monday, October 3, 2011 4:40 AM


  • In case anyone else is having this issue and finds this post, I have worked out enterPage. So here is how to use it with the fragments you just created in the above tutorial:

    Quite simply, this goes in your default.js file in the function that handles the loading of your fragments (in the above tutorial it was called loadPage). This is the function whose first line is something like this:

    WinJS.UI.Fragments.clone(location, state).then(function (frag) {

     A queueEvent for your animation needs to be added after the queueEvent type "fragmentappended" and it can be named whatever you want:

     WinJS.Application.queueEvent({ type: "elementAnimation" });

    you will also need to add the listener. This will go above the fragmentappended queue event:
    WinJS.Application.addEventListener("elementAnimation", listener);
    After this point, the end of your loadPage, function will look like this:

    WinJS.Application.addEventListener("elementAnimation", listener);
    WinJS.Application.queueEvent({ type: "fragmentappended", location: location, fragment: content, state: state });
    WinJS.Application.queueEvent({ type: "elementAnimation" });

    Now the listener needs to be defined. This will go above the event listener you just added:

    // Define a listener that fires when the fragmentappended event finishes        
    var listener = function handler(e) {
               var animateSectionsIn = document.getElementById("animatedElement");
                WinJS.Application.removeEventListener("animatedElement", listener);

    Now, what does this do? First an element is searched for by ID. It looks for an element named "animatedElement" on the fragment being loaded. It then calls the enterPage animation on this element resulting in your enterPage animation. The listener is then removed.

    The Important part? For one simple animation, make sure every one of your html fragments are enclosed in a div layer called "animatedElement". Thats it. When you navigate your fragments will animate in.

    Tuesday, October 4, 2011 10:11 AM