60 FPS on the mobile web

Flipboard recently launched a web version of their application. When I heard this news the first time, I wonder how the experience would differ form the Mobile or Tablet considering you now have a certain expectation from Flipboard.

Michael Johnston has written an elaborate post on how and why they build their new web version. 

These types of animations have always suffered from jank on the web, particularly on mobile devices, for one simple reason:

The DOM is too slow.

It’s not just slow, it’s really slow. If you touch the DOM in any way during an animation you’ve already blown through your 16ms frame budget.

One thing I really enjoyed while reading this elaborate article were the important pieces of details that Michael elaborates. How they were faced with a problem and how they solved it. Flipboard basically built their own web app framework using the HTML5 <canvas> element to overcome the issues that one faces while using DOM and CSS. 

Trying viewing the HTML source of their web version and you will be amazed.