60 FPS animations and responsive interactions are top priority problems of cross-platform Web development. Since desktop browsers are mostly fine with handling animations, mobile and embedded devices still provide bad user experience. The biggest reason for animations to be janky is that "DOM is slow". It is true since DOM is quite complex model and every DOM change create a ripple of events or chain reaction over whole document.
HTML GL solves "the slow DOM problem" by creating WebGL representations of DOM elements and hiding actual DOM after. As a result DOM elements become simple facades to their WebGL represenations (GPU accelerated textures) which are very effective from resources consuming perspective and are very cheap to transform or animate.
- Basic demo basic demo shows how to use HTML GL and animate GL Elements. It also demonstrate that HTML GL handle content change events and repaints element`s WebGL representation
- HTML GL slider rendered via WebGL
- DOM this is the same project. The only difference is that HTMLGL.js is not included
Use tag name <webgl> on elements you are going to animate. These divs and their content will be rendered in WebGL also their CSS Transform properties maped to WebGL representation transformations. So DOM elements will not take part in animations which is resource saving.
HTML GL is framework agnostic and it is easy to apply HTML GL to existing project in order to tweek performance.
Copyright 2015 Denis Radin aka PixelsCommander