discussed the history of prototype-based programming. I've been writing
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
layer tag. I blog a lot about
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
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.
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.
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
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
Although other animation frameworks were appearing, script.aculo.us was
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
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.
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
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
to IE's VML.
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.
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
Apple, Adobe, CSS3, or all of the above.
- Articles on DHTML and layers
- About the layer tag from Netscape
- Smooth animation using DHTML (from 1999)
- Image Animation w/Speed Control (2000)
- Introduction to Filters and Transitions
- Cross-Browser Animation by Dave Thau (2002)
- Better Living Through XHTML by Jeffrey Zeldman
- window.setTimeout at MDC
- 3D Transforms
- CSS Animations in Safari