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>
