Answered by:
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.
Thursday, August 9, 2012 2:26 PM
Answers
-
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)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Thursday, August 9, 2012 7:56 PM
- Marked as answer by Oliver Weichhold Thursday, August 9, 2012 7:56 PM
- Unmarked as answer by Jeff SandersMicrosoft employee, Moderator Thursday, August 9, 2012 7:58 PM
- Marked as answer by Jeff SandersMicrosoft employee, Moderator Thursday, August 9, 2012 7:58 PM
Thursday, August 9, 2012 7:56 PMModerator
All replies
-
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)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Thursday, August 9, 2012 7:56 PM
- Marked as answer by Oliver Weichhold Thursday, August 9, 2012 7:56 PM
- Unmarked as answer by Jeff SandersMicrosoft employee, Moderator Thursday, August 9, 2012 7:58 PM
- Marked as answer by Jeff SandersMicrosoft employee, Moderator Thursday, August 9, 2012 7:58 PM
Thursday, August 9, 2012 7:56 PMModerator -
Also see this card flip example:
http://desandro.github.com/3dtransforms/docs/card-flip.html
Jeff Sanders (MSFT)
- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Thursday, August 9, 2012 7:58 PM
Thursday, August 9, 2012 7:58 PMModerator -
Also see this card flip example:
http://desandro.github.com/3dtransforms/docs/card-flip.html
Jeff Sanders (MSFT)
Thursday, August 9, 2012 9:15 PM -
are there any examples or pointers on creating this animation in XAML?Friday, August 2, 2013 1:47 PM
-
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)Friday, August 2, 2013 5:32 PMModerator