Introducing Easy Web Site Animation with FACE

Last updated Oct 17, 2003.

The Reemergence of JavaScript

For most of the Web’s many years of existence, we have seen three kinds
of sites: the static kind, the kind that presents animated GIF images in an
attempt to be lively, and the kind that’s enriched with Flash in some
way.

While a page on the Web is static by nature (on its own, HTML is devoid of
any dynamics), demand is high for a rich and interactive user experience.
Advertisement banners have long made use of flashy animations to stand out among
the lifeless areas of the page, but plenty of sites have embedded Flash
documents to make parts of the page more interactive and lively.

In the earlier days of the Internet, however, it was not Flash but JavaScript
that enriched pages with pseudo-interactive effects to make them more appealing.
Unfortunately, this pre-2000 era’s JavaScript, dubbed Dynamic HTML
(DHTML), was rarely functional; more often than not, it was also abused by
developers to mask a lack of quality content on the site.

When standards-based development gained ground, the old DHTML enrichments
were quickly tossed aside in favor of cleanliness and more tranquil approaches
focused on user experience. Those Web developers still using JavaScript often
turned to cut-and-paste scripts from online resources that were seen by the
standards movement as disruptive and obtrusive. JavaScript was used more and
more for evil purposes such as creating pop-up and pop-under banners, which put
a black mark on the JavaScript name.

However, over the last few years JavaScript has seen a rejuvenation. It has
been given a new chance, even managing to become an incredibly popular resource
to enliven pages. The
widespread success of AJAX[1]
has renewed the interest of modern Web developers in JavaScript, and new tricks
are concocted with it regularly, this time to aid the user experience rather
than to disrupt it.

Yet the liveliness of JavaScript-enhanced pages came with a restriction.
CSS-based designers who knew little or no JavaScript programming were forced to
either mimic existing simple effects, such as color fades, or stick with
pre-made scripts and find help from other people to customize them. Real
animation power was minimal, and anything beyond the simplest animation or
effect required quite a good amount of knowledge and skill in JavaScript.

Flash was still a popular option—for sophisticated animation it was
even more popular—but Flash has its own set of problems. Few
standards-focused Web developers were anywhere near as proficient in Flash as
they were in CSS, if at all, and it takes tremendous effort to implement Flash
in an accessible manner. On top of that, Flash really shouldn’t be used
for any navigational elements, such as the menu or a list of archived
entries.

These and other predicaments ruled out Flash as a means to enrich sites in
certain ways. As a result, many CSS designers were left without options. Many
simply shrugged it off and moved on, trying to work their way around the issue.
For a while, that was sufficient. That time, however, has passed. Now, there is
FACE, which stands for
Faruk’s Animated CSS Enhancements.

What Is FACE?

FACE is the result of taking a little bit of JavaScript code to a much higher
level. The original JavaScript was written to create a sequence of several
chopped-up CSS files, in order to present a slideshow of how a CSS-based design
was put together. To produce more powerful animation live on a page, the concept
of looping through external CSS files, one for each step of the animation, was
clearly insufficient. But the animation had to be CSS-powered if it was
to be truly powerful and flexible.

To make that kind of animation freedom possible, it was evident that you had
to loop through classes on an HTML element. Looping through a Document Object
Model node, such as the one for background color, would do no good if you wanted
the element to move around by increasing or decreasing its margin. Looping
through classes would allow you to specify any CSS in each class that
you’d like, whether it was a margin or padding, color or something else
entirely.

Of course, animation freedom was only one aspect—what about having to
learn JavaScript? How could you create a different animation on a different
page, while using the same bit of JavaScript?

To accommodate that problem, the configuration of an animation would have to
be taken outside of the JavaScript—not only out of the JavaScript file,
but also out of JavaScript syntax. After all, if you still had to know
JavaScript syntax to implement it on a page, the CSS designers who had
absolutely no affinity for or interest in JavaScript still wouldn’t be
able to use it.

This problem was solved by putting the configuration of an animation right
into the HTML source itself, along with the key to trigger the FACE engine. In
true unobtrusive practice, if the key to trigger FACE (an
id="enhance" attribute on an element in the body section of a
page) is absent, the engine isn’t loaded, and the script simply exits
itself.

FACE is now a small but sophisticated JavaScript engine that can be plugged
into any Web site, and can be used by those who have absolutely no knowledge of
JavaScript. It allows you to hook up an animation to an element or several
elements in your page, and create the entire animation’s effect using
nothing but CSS.

A Step in What Direction?

When FACE was released as an early Christmas present last year, it was met
mostly with enthusiasm and excitement, but some people responded with concern.
According to these folks, FACE seemed like a step back to the pre-2000 era of
DHTML effects.

Their concerns are not entirely ungrounded: FACE was a particularly early
beta release that supported only two modes of triggering: onLoad and
onMouseOver. Because of the limited options at the time, most of the
examples that were released along with FACE showcased its technical power in a
selection of onLoad-triggered animations.

Had FACE missed its goal? The cynics would argue that it didn’t
particularly enhance the user experience, and perhaps was even
distracting—much like the old DHTML. But there’s much more to FACE
than merely some onLoad examples.

FACE’s potential has been recognized and acknowledged. The
onLoad trigger is not the only one, and many more trigger methods are
being developed so that FACE can be implemented in a plethora of ways and
situations. At the time of this writing, FACE was still a very first
release—a beta release, even—and from this point on it can only
improve.

In the next article in this series, we’ll take a look at how you can
implement this new tool in your Web site and make your pages come alive.