History of JavaScript: Part 6

Alex R. Young





animation language history hoj

History of JavaScript: Part 6

Posted by Alex R. Young on .

animation language history hoj

History of JavaScript: Part 6

Posted by Alex R. Young on .

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.


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
. 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

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
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
. The working
draft of CSS Animations Module Level
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

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.