What Hardware Should I Use?

What web applications make extensive use of hardware accelerated transitions to mimic the behavior and performance of native mobile applications, and how have they been implemented?

• Native iOS and Android applications make extensive use of smooth animated transitions to enhance visual communication and deliver a smoother, more refined experience. Both platforms benefit from underlying architecture that prioritizes 2D and 3D transforms, making animations fluid and integral to the overall experience. What web applications make great use of CSS3, HTML5 and Canvas to create rich animations and smooth performance for a more native-like experience, and what techniques do they use to approximate the performance of native applications? How do they handle cross-browser compatibility?

• Answer:

  At Belly, we've built our merchant application (iPad) in "HTML5". In doing so, utilizing the GPU (Hardware Acceleration) was critical. It has all sorts of animations and transitions. Especially the welcome screen. (See: http://www.davearel.com/belly/ipad_demo.m4v) You won't be able to download the application, but you can see it in any of our locations around the country:  https://bellycard.com/locations Hardware Acceleration is not only important in improving animations, but it can have a tremendous impact on rendering performance. Which you may already know, mobile browsers really struggle with. Most of the time, I just selectively add translate3d to any element that is a bit sluggish to render or animate smoothly.   -webkit-transform: translate3d(0, -2000px, 0); Though, sometimes (especially in iOS6), this won't trigger HWA. I find this works, though:   -webkit-transform: translateZ(0);   -webkit-perspective: 1000;   -webkit-backface-visibility: hidden; An important thing to note is that hardware acceleration is very memory intensive. So don't overuse it!