Emulating the Windows 8 Application Launch animation in HTML5/JS

Question

Can someone recommend a way on how to emulate the Windows 8 Application Launch animation (3D rotation, fly away) in HTML5/JS.

I would like to implement this for a special case when the user navigates to a detail page by selecting an item of a WinJS.UI.ListView.

---

weichhold.com

Answer 1

We do not have a built in animation for this.  You can use CSS transitions and apply a perspective like pinch to one side however to accomplish this.  There are a lot of examples of this technique if you Bing it (search on CSS 3d Transform)

http://msdn.microsoft.com/en-us/magazine/jj133820.aspx has an example of a 3d transform.

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Also see this card flip example:

http://desandro.github.com/3dtransforms/docs/card-flip.html

---

Jeff Sanders (MSFT)

Answer 3

Also see this card flip example:

http://desandro.github.com/3dtransforms/docs/card-flip.html

---

Jeff Sanders (MSFT)

Excellent. Thanks!

---

weichhold.com

Answer 4

are there any examples or pointers on creating this animation in XAML?

Answer 5

You can ask in the C# forum where they support XAML

---

Jeff Sanders (MSFT)

@jsandersrocks - Windows Store Developer Solutions @WSDevSol
Getting Started With Windows Azure Mobile Services development? Click here
Getting Started With Windows Phone or Store app development? Click here
My Team Blog: Windows Store & Phone Developer Solutions
My Blog: Http Client Protocol Issues (and other fun stuff I support)