Developer

Make your GIFs dance: What you need to know before animating

Add the excitement of animation to your site--but first, learn what you need to know about animation.

By Cecilia Farell
(Updated 9/21/99)

If your Web site just sits there, you're not taking full advantage of the power of the medium. Fortunately, adding the excitement of animation to your site can be quick, easy, and inexpensive—if you know how.

Web designers have a varied arsenal of animation options, ranging from simple cel animation (a frame at a time) to complex forms delivered by Java, Shockwave, Flash, and QuickTime, to name a few. But you don't need to go overboard to get in the game.

Simple GIF animation can bring life and movement to your Web pages without a big investment of time or money. And GIF animation doesn't require helper apps, plug-ins, or ActiveX controls.

Animated GIFs have been around for some time, in fact, since the introduction of the GIF89a format in 1989. But it wasn't until browsers supported them that they became as ubiquitous as today. Why are animated GIFs so useful? You can use them to create all kinds of cool effects including:

  • slide shows
  • splits
  • moving text
  • wipes
  • color cycling
  • fades
  • icons
  • cel animation
The benefits of animation

There are many benefits to using animated GIFs to liven up your Web pages. Animated GIFs give you the flexibility to:

  • set the background color of the animation;
  • use a single (global) palette for the whole animation, or individual (local) palettes for each image;
  • set the dimensions of the animation area or screen, regardless of the individual image's dimensions, so you can display more than one image at a time;
  • use images of varying sizes and use x and y coordinates to set their position relative to the upper-left corner of the animation screen;
  • apply interlacing to individual images to make them seem to load faster;
  • use transparent images to show the background or previous image through a transparent color;
  • specify the delay between images (to a hundredth of a second);
  • define how each image is treated after it is displayed and before the next one appears (you can leave the image as it is, or have it disappear, revealing the background color or the previous image); and
  • run the animation a set number of times or indefinitely.

As with regular GIFs, you can place HTML anchor tags around animated GIFs to turn them into hyperlinks.

A word about palettes

Color palette management is especially important with animated GIFs. When you create a GIF animation, you can choose to use an individual or local palette for each image or a single, or global palette for the whole animation. A local palette allows up to 256 colors per image, while a global palette maps all the images in the animation to a shared palette, limiting the total number of colors in the animation to 256. Using a global palette may cause colors in the individual images to shift dramatically, especially in animations composed of many images that share few colors.

But local palettes are not always an option. Monitors displaying them have to support more than 256 colors, or you must be sure the animation never displays more than 256 colors at a time. Most common among Web designers is to adhere to the 216-color Web-safe palette.

Animation tips

One thing that separates a good Web design from a mediocre one is consideration for the audience. If a Web site doesn't communicate its message or content well and doesn't address the audience's needs, it's simply not doing its job—no matter how cool the animation. To help you create good animated Web sites, follow these three simple rules.

1. Balance looks with usability
Don't use Web animation just for the hell of it. If your animation doesn't enhance the content of a page, don't include it. Aimless animation merely distracts viewers from what's important. And be warned: indefinite looping can quickly become annoying.

2. Let bandwidth be your guide
Despite the hype surrounding ISDN, T1 lines, and cable modems, most Internet surfers still sludge through the Web with 28.8-kbps or 56-kbps modems. Unless you're sure that your audience has faster connections, keep your animations as small as possible. If you can't squeeze them down to about 20K to 30K, consider redesigning or eliminating them.

3. Design for the lowest common denominator
You may have a 21-inch monitor that supports 16 million colors, but what about the people who will be reading your page? To reach the widest possible audience, design your animations for 640-by-480-pixel resolution and Netscape's 216 browser-safe colors.

Cecilia Farell is a Web designer and freelance writer based in Toronto.

Editor's Picks