History of JavaScript: Part 6

28 Jun 2010 | By Alex Young | Tags language history hoj animation

This article is part 6 of our History of JavaScript series. Last week I discussed the history of prototype-based programming. I’ve been writing a lot about JavaScript animations lately, so this week I thought I’d cover the history of JavaScript animation.

The DHTML Era

Animation in web design used to involve roll-over effects, animated gifs, image maps, and other things that have been largely superseded with simple CSS. The blanket term for these techniques was DHTML (Dynamic HTML), and a great deal of books were written on the nebulous topic. I hardly ever hear the term DHTML anymore, and it seems like post-dot-com era designers and developers have quietly moved on.

When Netscape 4 came out people started doing incredibly advanced tricks with JavaScript and the layer tag. I blog a lot about cutting edge JavaScript — HTML5 games, animations, applications — but this has all been done before almost 10 years ago, albeit with less elegant markup and legacy technology.

Netscape invented layers in 1997, at the same time the W3C were working on the div tag, so it isn’t surprising that layers died quickly. There was a lot of hype and excitement about layers, but their big downside was they were Netscape 4 specific. Positioning and sizing a layer was straightforward, as was moving one.

Another relic from 4th generation browsers is revealTrans. We still use filter: in IE to bend it into supporting things like opacity, but revealTrans could be used to create transition effects for elements or entire pages.

Browser-specific APIs and poor use of these effects gave DHTML a bad name. The rise of the web standards movement encouraged designers to try out new techniques.

Standards Movement

Cross-browser and semantic XHTML became the next big thing. And even though IE6 was the elephant in the room making life difficult for designers, innovators still looked at how to build better sites without breaking the specs.

Sites using animations and effects started to look dated. Online communities like A List Apart preached the good word of standards compliance.

At this point I felt like dynamic HTML and JavaScript animation might be something left in the past, but then Matthew Linderman at 37signals published Web Interface Design Tip: The Yellow Fade Technique. 37signals had become famous for simple, focused web design, and pushed the standards-based approach. The Yellow Fade Technique used a little bit of JavaScript to briefly highlight a changed item on a page in a web app. It didn’t matter if the browser couldn’t display it, it simply enriched the experience where available.

A design-savvy company backing what could have been regarded as a dated DHTML-like technique meant people began to take animations more seriously again. And 37signals’ relationship with script.aculo.us through Rails meant JavaScript animation caught on with a new generation of developers. Although other animation frameworks were appearing, script.aculo.us was probably the most widely known and a key piece of the JavaScript animation renaissance.

The Solution

Back in the 90s while Netscape and Microsoft were battling each other with proprietary technology, our core present-day animation tool was already available. In fact, setTimeout was introduced with JavaScript 1.0 in Netscape 2.0.

Netscape even had an example called Sliding Tower that used setTimeout to animate moving a picture. It’s ironic that while browsers fought each other with flashy new techniques, all we really needed was good old setTimeout and a workable DOM.

Originally setTimeout was considered too slow because of the performance of browsers and computers in the 90s. But now most animations on the web use this family of functions.

To create animations with setTimeout or setInterval, styles are manipulated through the DOM. This commonly involves manipulating opacity or positional attributes. Modern browsers can even use GPUs to render effects: 3D Transforms on webkit.org has some examples.

Animated vector graphics using the canvas tag has increased in popularity with the rise of JavaScript libraries that translate SVG to IE’s VML.

CSS Animations

Apple’s war with Flash means Apple is a big backer of CSS animations. The working draft of CSS Animations Module Level 3 has three editors, all from Apple. WebKit browsers already have support.

Purists argue that JavaScript should deal with behaviour, while CSS should be left to styling. Jonathan Snook makes an argument against CSS animations in CSS Animations in Safari.

It seems like the future may be driven by mobile devices, which might be why Apple would prefer to offer highly optimised effects through CSS rather than JavaScript. I’m sure in 10 years we’ll be either laughing at Apple, Adobe, CSS3, or all of the above.

References


blog comments powered by Disqus