locked
Peek animation RRS feed

  • Question

  • Hey,

    I use a grid layout in HTML5/JS and I'd like to animate the tiles within my grid with the Peek animation to have a rotation between image and text.

    Can anybody help out with a sample (JS and HTML)? I tried the UpdateTile stuff from the HTML animation sample but I'm neither able to manage removing the button control nor to add an infinite loop.

    Thanks in advance!

    JS

        var page = WinJS.UI.Pages.define("/html/updateTile.html", {
            ready: function (element, options) {
                runAnimation.addEventListener("click", peekToggle, false);
            }
        });
    
        function peekToggle() {
            if (runAnimation.innerHTML === "Peek") {
                peekTile();
                runAnimation.innerHTML = "Reset";
            } else {
                unpeekTile();
                runAnimation.innerHTML = "Peek";
            }
        }
    
        // Play the Peek animation
        function peekTile() {
            // Create peek animation
            var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);
    
            // Reposition tiles to their desired post-animation position
            tile1.style.top = "-150px";
            tile2.style.top = "-150px";
    
            // Execute animation
            peekAnimation.execute();
        }
    
        // Reset the divs to play the animation again
        function unpeekTile() {
            var peekAnimation = WinJS.UI.Animation.createPeekAnimation([tile1, tile2]);
    
            // Reposition tiles to their desired post-animation position
            tile1.style.top = "0px";
            tile2.style.top = "0px";
    
            // Execute animation
            peekAnimation.execute();
        }

    HTML

        <div id="input" data-win-control="SdkSample.ScenarioInput">
            <p>Use the Peek animation to update the contents of a tile.</p>
            <button id="runAnimation">Peek</button>
        </div>
        <div id="output" data-win-control="SdkSample.ScenarioOutput">
            <div id="croppingDiv">
                <div id="tile1">Content 1</div>
                <div id="tile2">Content 2</div> 
            </div>
        </div>



    Friday, June 29, 2012 7:36 AM

Answers

  • Hi JackX3,

    Tile animations apply to tiles only.  There is no provided animation like you want for Grid items.

    -Jeff


    Jeff Sanders (MSFT)

    Monday, July 2, 2012 1:41 PM
    Moderator

All replies

  • Hi JackX3,

    Tile animations apply to tiles only.  There is no provided animation like you want for Grid items.

    -Jeff


    Jeff Sanders (MSFT)

    Monday, July 2, 2012 1:41 PM
    Moderator
  • Hello,

    If I understand you correctly, this article might help you.

    -Sri

    Friday, August 31, 2012 11:15 PM