How does JavaScript Animation work?

JavaScript animation isn't difficult to create but it does require planning.
Your first consideration should always be the design of the animation, what purpose it will serve, and how it will aid in the communication of your message.

Your next consideration is to resolve browser compatibility issues. This is no big deal. Just copy my scripts and paste them into your pages as needed!

You'll also need to cache (pre load) your images so they're available when you need them. Again, this is no big deal.

And finally, JavaScript animation works by literally replacing one image with another. For this to happen you'll need to select a JavaScript "event" that triggers this swap.

This tutorial covers all these issues in detail.  There are also examples that you can download, modify, and use in your own web pages.
We close with a section on the dangers and pitfalls you may experience when creating animation with JavaScript.

Why use JavaScript Animation?

Originally, it took server-side scripts and open network sockets to create web animation.  Today, web animation is much easier to create. And web developers have many options for animating images on the web.
JavaScript animation offers several key advantages over other forms of animation:

The most important thing to know about any web animation is...

Any movement (regardless of quality) on an otherwise static web page will attract the viewer's attention. That being the case, make sure that your animation is more worthy of attention than those things that are not moving.

The worst reason to use animation is because "it's cool", or you're looking for some way to "jazz-up", "activate", or "ignite" your web pages.

Don't yield to hype! Make sure your use of animation communicates more about your content than it says about you the developer.

[Tutorial Home Page]    [Next Lesson]