locked
WinJS enterPage animation doesn't work

    Question

  • So I have been trying to get some animations in my application and seems like it doesn't work as expected.

    When I call

    WinJS.UI.Animation.enterPage(element)

    everything is fine and the element scrolls from right to left which is default with opacity.

    However the moment I override default values, everything just stops working, using something like this -

    WinJS.UI.Animation.enterPage(element, { top: "100px", left: "0px" });
    I don't see any animation, the element just gets thrown there, and there's no opacity change for the element to be faded into the screen either. Again this kind of works partially, when I pair with WinJS.UI.Animation.exitPage(oldElement) but it shouldn't be needed.

    I also tried using custom animation so that I'd have more control over timing than what is provided as part of default animation library, and that behaves a lot more differently. I just got the code written for enterPage in WinJS, pulled into my code, and tried tweaking around with the values... no matter what I do, I'd see only opacity change and the element fade in, and no translation at all. Even when I paired it with exitPage() or customExitPage(), nothing, it just wouldn't work.

    Is this a problem with WinJS.UI.executeAnimation() and WinJS.UI.executeTransition()?


    Regards, Rv.

    Tuesday, March 10, 2015 10:40 PM

Answers

  • well, I was able to finally figure out the "weird behavior". The @keyframes should have been set in CSS, and I was trying a few other things and apparently that's the reason that it didn't work.

    However, I would probably say the explanation could have been a little more clearer in the site as well, when we are already providing the "from - to" values in the javascript, I would otherwise about providing the same again as part of CSS too which is weird.

    Like mentioned in the site, add this to css:

    @keyframes custom-translate-in    { from { transform: translateY(50px); } to { transform: none; } }
    and have this in js:
    function runCustomShowStoryboard() {
        return WinJS.UI.executeAnimation(
            target,
            {
                keyframe: "custom-translate-in",
                property: "transform",
                delay: 0,
                duration: 367,
                timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
                from: "translate(50px)", 
                to: "none"
            });
    }
    Never was able to figure out why and how the "bottom to top" animation started working (probably restarting visual studio helped)


    Regards, Rv.

    Wednesday, March 18, 2015 6:06 PM

All replies

  • I used the sample provided here:
    https://code.msdn.microsoft.com/windowsapps/using-the-animation-787f3720

    Then modified the runEnterPageAnimation in enterPage.js as followed for scenario 1.

        function runEnterPageAnimation() {
            // Get user selection from control
            var pageSections = pageSectionsControl.value;
            content.style.overflow = "hidden";
    
            // Animate the application's entrance in the number of stages chosen by the user
            // Use the recommended offset by leaving the offset argument empty to get the best performance
            var enterPage;
            switch (pageSections) {
                case "1":
                    // Animate the whole page together
                    enterPage = WinJS.UI.Animation.enterPage(rootGrid, { top: "1000px", left: "0px" });
                    break;
    .
    .
    .
    When I run the sample and set it to animate the whole page it goes from bottom to top.  So not sure why it is not working for you.


    Bret Bentzinger (MSFT) @awehellyeah

    Tuesday, March 10, 2015 11:50 PM
    Moderator
  • even if you want to do it on an element which is not the outermost div?

    Regards, Rv.

    Wednesday, March 11, 2015 12:35 AM
  • Adding on to what I mentioned above, if you want you could only animate one item.  This shows the featureLabel, which will be the only element on the page moved from bottom to top.
                    enterPage = WinJS.UI.Animation.enterPage(featureLabel, { top: "1000px", left: "0px" });


    Bret Bentzinger (MSFT) @awehellyeah

    Wednesday, March 11, 2015 7:34 PM
    Moderator
  • somehow the "to top" animation started working with specifying {top, left} now.

    However custom animation still doesn't work, I took the windows "HTML animation library sample" modified it a bit and tried with custom animation as mentioned in msdn link, the same one that you used as well, and I see only the opacity working, and not the translation.

    Sorry about the code not being cleaned up, I added the change to transitionPages.js, and instead of enterPage() used the runCustomShowStoryboard(), please search for this in the project.

    Source: https://onedrive.live.com/redir?resid=BE8342DF6C75658B!1619&authkey=!APyiZrVcK_AdMxw&ithint=file%2c7z


    Regards, Rv.

    Tuesday, March 17, 2015 1:00 AM
  • function runEnterPageAnimation() {
        // Get user selection from control
        var pageSections = document.getElementById("pageSectionsControl").value;
        document.querySelector(".box").style.overflow = "hidden";
    
        // Animate the application's entrance in the number of stages chosen by the user
        // Use the recommended offset by leaving the offset argument empty to get the best performance
        var enterPage;
        var rootGrid = document.getElementById("rootGrid");
        var pageContent = document.getElementById("pageContent");
        var header = document.querySelector("header");
        var footer = document.querySelector("footer");
        
        function runCustomShowStoryboard(target) {
        var promise1 = WinJS.UI.executeAnimation(
            target,
            {
                keyframe: "custom-translate-in",
                property: "transform",
                delay: 0,
                duration: 367,
                timing: "linear",
                from: {top:"50px", left: "0px"},
                to: {top:"0px", left: "0px"}
            });
        var promise2 = WinJS.UI.executeTransition(
            target,
            {
                property: "opacity",
                delay: 0,
                duration: 367,
                timing: "linear",
                from: 0,
                to: 1
            });
        return WinJS.Promise.join([promise1, promise2]);
    }
        switch (pageSections) {
            case "1":
                // Animate the whole page together
                enterPage = runCustomShowStoryboard(rootGrid, null);
                break;
            case "2":
                // Stagger the header and body
                enterPage = WinJS.UI.Animation.enterPage([header, [pageContent, footer]], null);
                break;
            case "3":
                // Stagger the header, input, and output areas
                enterPage = runCustomShowStoryboard([header, pageContent, footer]);
                break;
        }
        document.getElementById("message").textContent = "Page appeared in " + pageSections + " section(s).";
    }
    var runAnimation = document.getElementById("runAnimation");
    runAnimation.addEventListener("click", runEnterPageAnimation, false);
    


    Regards, Rv.

    Tuesday, March 17, 2015 1:11 AM
  • well, I was able to finally figure out the "weird behavior". The @keyframes should have been set in CSS, and I was trying a few other things and apparently that's the reason that it didn't work.

    However, I would probably say the explanation could have been a little more clearer in the site as well, when we are already providing the "from - to" values in the javascript, I would otherwise about providing the same again as part of CSS too which is weird.

    Like mentioned in the site, add this to css:

    @keyframes custom-translate-in    { from { transform: translateY(50px); } to { transform: none; } }
    and have this in js:
    function runCustomShowStoryboard() {
        return WinJS.UI.executeAnimation(
            target,
            {
                keyframe: "custom-translate-in",
                property: "transform",
                delay: 0,
                duration: 367,
                timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
                from: "translate(50px)", 
                to: "none"
            });
    }
    Never was able to figure out why and how the "bottom to top" animation started working (probably restarting visual studio helped)


    Regards, Rv.

    Wednesday, March 18, 2015 6:06 PM