Animation means well. It wants to enhance, to excite, to illustrate. But so often it is misunderstood, exploited, and embarrassed. Please feel its pain and use it wisely. Otherwise you can send people running with disgust, spreading bad rumors about our friend the animation.

Why this plea, you ask? It is simple. We are given tools. Tools that facilitate, clarify and impress. But so often we forget the purpose of these tools and their power is diminished or even turned against them. This is true of animation.

At first you might be excited to see how easy it is to animate. You begin with a simple drawing and see it come to life. Then before you know it your website is flickering, pulsing, and causing seizures left and right. That's just plain wrong.

So before you even decide on an animation, figure out what its purpose is. Even if it just functions as an eye grabber, make sure it is tolerable. Any moving object will draw attention and if you have ten blinking, slurping, burping mailboxes on your screen, you will also soon have some enemies.

Animations are great for:

  • Illustrating a point
  • Grabbing your eye and then letting it go (animations don't have to loop forever)

Animation is bad when:

  • There are a lot of them serving no purpose
  • *It's a moving mailbox

*Disclaimer: It may now be apparent that the author has a thing against the animated mailbox. Not really, this is just to see if you're paying attention. It's your site.

Animation Basics

You have most likely seen a flip book at some point. It is a collection of pages with a drawing on each page that, when flipped, creates an animation. All the creator does is draw an image and then alter it slightly on each page so that when viewed in succession it appears to have movement. This is the same procedure you will use for the Web.

Let's say you want to illustrate the moves used to create an origami frog. Your first step would be to choose the size of your animation. Each image should line up so that the finished product does not appear jumpy. Some programs allow you to import a layered file with each layer being a separate frame. Other programs only allow you to import flat images. If this is the case, you will need to make sure your images are in the correct place within each frame.

Begin with your first image. In the case of the origami frog, your image would be a square. The next image would be the same square, but with dotted lines in the place of the first fold. The following image would show the fold and so forth.


When the images are imported or dragged and dropped into the animation program, you will see them in a row. The frames can then be manipulated, moved around, and given special effects. Most programs have swanky fades and transitions, control over how many times you want the animation to loop, and time delays so you can slow down or speed up each frame, or the entire animation. Playing around with these features is the best way to understand them, but keep these points in mind:

  • Transitions add several frames to your animation and will greatly increase the file size.

  • As animations are saved as GIFs, any gradients (shading or blending of colors) will add to the file's size. The fewer colors, the smaller the file. Some programs will let you import a palette specific to your images.

  • Looping should be kept to a minimum unless an infinite loop is its purpose (like twinkling stars for example).

Web Tutorials

Just as there are many animation programs, there are many tutorials. Two of the best resources are Hotwired's Webmonkey and ZDNet's Devhead. Both sites offer instructions for various animation programs as well as useful information on what to consider when animating.

Devhead's Animation 101 takes you through the basics of constructing Web animation, from creating your images to optimizing them.

Webmonkey's GIF Animation Refresher helps you think about planning your animation. When you're ready to tackle more advanced animation, check out the Animation Tutorial by Anna McMillan and Emily Hobson.

Home Information Page HTML Lessons Java Script Lessons