Creating Web Animations

Chapter 1. Introduction to Web Animations

While we think of animation as a recent creation brought about by film and computers, people have been fiddling with ways to communicate motion for a really really long time (Figure 1-1).

Figure 1-1. A sequence of pictures from 3000 BC (Wikipedia)

Those ways have ranged from cave paintings and elaborate mechanical devices to more familiar, contemporary solutions, such as what you see on television, computers, and smartphones (Figure 1-2).

Figure 1-2. A really small sampling of apps that are lively and full of motion!

No longer are animations primarily in the domain of games, intros, cartoons, banner ads…or even cave paintings! Animations are deeply ingrained in today’s technology, and they make up a large part of your applications’ overall user experience. They can make your applications easier to navigate. They make your content more presentable. They can help your creations feel more alive and fun. Who doesn’t want more of that?

That’s enough background for now. You aren’t here to get a history lesson or be convinced of why animations are useful. You probably already know about their importance. What you want to know is how to actually implement animations, and you have come to the right place. In this chapter and subsequent ones, ...