16. Animation

Animation is actually a pretty simple concept. At its most basic, animation is just the process of changing a value over time. That value could be the position, size, opacity, or even color of an HTML element. Used appropriately, JavaScript animation can help create a dynamic and engaging user experience for your Web site.

Animation has endless uses, so instead of a specific example, I’ll show you how to program animation utilities from the ground up. It’s also a great example of asynchronous programming and the global timer functions from Chapter 7.

Simple Animation

The following examples use this HTML document, which simply draws a small black box, to demonstrate animation concepts:

The simplest animation involves changing ...

Get The JavaScript PocketGuide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.