The Evolution of Web Animation Techniques

Animation has the effect of catching the eye, and has been used for many years in advertising, with Adobe’s proprietary Flash based animations being the dominant force. Web animation techniques have evolved greatly since the “glorious” web 1.0 days when websites would render on your screen revealing seizure inducing blinking text and dancing babies.

Interactive animations can be implemented to pull users further into adverts, to enhance the experience of a web app by creating animations normally associated with native or desktop apps, and even to create games.

In the early days of web development animation was achieved using the animated GIF format. With this format, essentially multiple GIF images are stored in one file, the browser displays one image (frame) after another, with browsers typically having different rules as to the number of frames per second (fps) it should display. With no mechanism of interaction these were only used for the most simple of animations.

Until a couple of years ago if you required something more sophisticated your only option was to develop with Flash. Since then however Apple has sold vast amounts of iPhones and iPads, all of which don’t support Flash. Luckily multiple techniques are now available through the HTML5 standard, and CSS3 techniques among others.

JavaScript and HTML

Browser JavaScript and rendering engines have been getting a lot speedier over the last few years. Through a combination of faster JavaScript and common html elements such as divs, spans, imgs etc a reasonable level of animation can be achieved, especially for development of JavaScript based UI widgets and controls.

Third party JavaScript frameworks make this easy to achieve cross browser and cross device – because of this its use is extremely common. However, it has its limitations, most notably in performance. Animation is achieved by continually changing CSS properties associated with a HTML element a pre-determined number of times per second, forcing the browser to re-render the item each time.

For example, the following animation is achieved by increasing the left margin width of the NewBay logo, and once it reaches a certain point, reducing the margin width back to 0.

Luckily, on desktop browsers, rendering speeds have improved considerably, so this technique is quite sufficient for simple animations. On mobile devices where CPUs are more limited, performance can be inconsistent (animation jumping), and this inefficiency can drain battery life. For complex animations (e.g. games) this technique will peform badly even in desktop environments, and can never compete with Flash.

CSS3 Transitions, Transforms and Animations

The CSS3 standard brings many new capabilities, including the ability to animate browser content through CSS. This brings a significant performance improvement over the traditional JavaScript/html approach, as all animations are performed natively by the browser. Existing third party JavaScript frameworks will make use of these new techniques whilst maintaining backward compatibility using the traditional approach.

Animations through CSS have the additional advantage of being very simple to implement, with minimal code required. Transitions allow an element to be transitioned from one visual state to another, while transforms allow rotation, scale, and skewing of elements in 2D (and 3D coming soon).

The following example applies a Transition to the left margin of the NewBay logo (Chrome, Opera, Safari, and FireFox 4 – in IE7/8 and FF3 the image will just switch sides and not animate):

Widespread support is the only issue with this approach, but this is changing. All the latest browsers now support Transitions at a minimum (including smartphones and tablet devices). Once support for Transforms and Animations is widespread this will become the standard mechanism for simple browser animations.

Ultimately however, if functionality is required to compete with Flash capability, the next few technologies are worth looking at.

Scalable Vector Graphics (SVG)

SVG is an XML markup language for describing two-dimensional vector graphics.

Of all the graphics technologies mentioned in this post, it is the most similar to Flash technology. What distinguishes SVG from Flash is that it is in effect a standard with an open XML format as opposed to a closed binary format. SVG is a vector graphics format and vector graphics can be scaled without loss of image quality, while raster (bitmap) graphics cannot.

Zoom into the example above in your browser (IE9, SF, CH, FF, OP) using ctrl++, and you will see the quality of the flower remains intact, whereas the other examples in this post get pixelized. It can be used to develop highly interactive Web applications with scripting, advanced animation events, and filters. With the recent release of IE9 SVG is now supported by all the major desktop browsers, and iPhone, iPad, Blackberry, and the next version of Android (honeycomb). SVG technology is used right now in Google Maps.

Here are some examples (for SVG supporting browsers only): Rendering capability | Interactivity | Gaming

HTML5 Canvas

Canvas and SVG can achieve similar results, but whereas SVG’s vector approach works better with a larger surface or a smaller number of objects, Canvas is rendered pixel by pixel as a bitmap canvas and works best with a smaller surface or a larger number of objects. Animating in SVG means moving existing rendered objects separately if required, whereas in Canvas it means re-drawing the whole canvas for each frame.

This is great for developing small arcade style games, especially in the mobile space where Canvas is supported on Android, iPhone/iPad, and Blackberry devices.

WebGL

This is where things get really interesting. Only available in the very latest browsers (FF4, OP11, CH9, SF (latest)), WebGL makes use of the existing HTML5 Canvas element to bring 3D graphics to the web. The API is based on OpenGL ES 2.0, which means that it will be possible to run WebGL on many different devices, such as desktop computers, mobile phones and TVs.

3D is nothing new on the web, as Virtual Reality Modeling Language (VRML) was introduced into Internet Explorer in the 90′s with the intention of creating online virtual worlds. However, it never took off for a variety of reasons, terrible performance being one of them.

But things are different now, as this incredible demo shows (produced by FireFox) using WebGL with multiple HTML5 features (you’ll need FF4 or CH9+, plus a good graphics card to view).

A Word on Hardware Acceleration

No matter what graphics technology is used, for complex animation heavy CPU usage is required. Now that the browser wars have really heated up, browser vendors are looking at new ways to compete.

The latest area of focus is hardware acceleration – when the browser hands off processor-intensive tasks to the computer’s graphics processor to make animations and page rendering faster and smoother. This is especially important for WebGL which really heats up your processor. Chrome, Internet Explorer 9, and Firefox 4 now all support hardware acceleration on Windows 7.

It’s now up to the developer community to innovate with these technologies for the next phase of the web experience.