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, you will learn how to work with animations in HTML. In a short time, you will become an animation expert…or at least be good enough to play one on TV.

What Is an Animation?

Before we proceed further down the bright, lava-filled pit where you learn how to create animations, let’s take a step back and figure out what an animation is. Let’s start with a definition. An animation is nothing more than a visualization of change—a change that occurs over a period of time.

Let’s look at that definition in more detail.

The Start and End States

If visualizing change is an important part of an animation, we need to create some reference points so that we can compare what has changed. Let’s call these reference points the start state and the end state. To better explain what is going on, let’s come up with an easy-to-understand example as well.

Let’s say our start state looks like Figure 1-3.

Figure 1-3. In the beginning, there was a small blue circle

You start off with a small blue circle located to the left of the screen. At the end state, your blue circle now looks sorta kinda like Figure 1-4.

Figure 1-4. The circle moves right and grows larger

Based just on the information you have about what our blue circle looks like in the start and end states, what can you tell is different?

One change is the position. Our blue circle starts off on the left side of the screen. It ends up on the right side. Another change is the size. Our circle goes from being small to being much larger.

How do we make an animation out of this? If we were to just play the start and end states repeatedly, what you would see is a circle that just bounces from left to right very awkwardly. That is pretty turrible. Just turrible. What we need is a way to smooth things out between the start and end states. What we need is a healthy dose of interpolation.

Interpolation

Right now, what we have are two discrete states in time: the start state and the end state. If you were to play this back, it wouldn’t be an animation. In order to make an animation out of what we have, we need a smooth transition that creates all the intermediate states. The process of creating these intermediate states is known as interpolation.

This interpolation, which occurs over a period of time that you specify, would look similar to Figure 1-5.

Figure 1-5. Behold…an animation!

You may be wondering who specifies the interpolated states. The answer, which is probably good news, is that your browser or HTML rendering engine will take care of the messy details. All you need to specify is the start state, the end state, and the duration over which the transition between the two states needs to occur. Once you have those three things, you have an animation!

Later you’ll see how adding some other ingredients into the pot, such as timing functions (aka easing functions), can alter how the interpolation works. For now, though, just revel in this simple explanation of what makes up an animation, put on your best party clothes, and get ready to meet the three flavors of animation that you will end up using.

Animations on the Web

On the web, there isn’t just a single animation implementation (hey, that sorta rhymes!) that you can use. You actually have three flavors of animation to choose from, and each one is specialized for certain kinds of tasks. Let’s take a quick look at all three and see how they relate to the animation definition you saw in the previous section.

CSS animations (aka keyframe animations)

CSS animations are like traditional animations on some sort of performance-enhancing substance that makes them more awesome. With these kinds of animations, you can define not only the beginning and the end state but also any intermediate states, lovingly known as keyframes (see Figure 1-6).

Figure 1-6. How an animation made up of keyframes might look

These intermediate states, if you choose to use them, give you greater control over the thing you are animating. In Figure 1-6, the blue circle isn’t simply sliding to the right and getting larger. The individual keyframes adjust the circle’s size and vertical position in ways that you wouldn’t see if you simply interpolated between the start and end states.

Remember, even though you are specifying the intermediate states, your browser will still interpolate what it can between each state. Think of a keyframe animation as many little animations daisy-chained together.

CSS transitions

Transitions make up a class of animations where you only define the start state, end state, and duration. The rest, such as interpolating between the two states, is taken care of automatically for you (see Figure 1-7).

Figure 1-7. Transitions only need a start and end state to do their thing

While transitions seem like a watered-down, simplified keyframe animation, don’t let that trick you. They are extremely powerful and probably the type of animation implementation you’ll use the most.

Scripted/JavaScript animations

If you want full control over what your animation does right down to how it interpolates between states, you can use JavaScript (see Figure 1-8).

Figure 1-8. When you use JavaScript, you have a lot of freedom in defining how your animation works

There are a lot of cool things you can do when you opt out of the interpolation the browser does for you, but we won’t be spending too much time in this area. Scripted animations have their place in games and visualizations, but covering those areas fully goes beyond the UI focus of this book.

Conclusion

To quickly recap, an animation is nothing more than a visualization of something changing over a period of time. In HTML, you have not one, not two, but three different ways of bringing animations to life: CSS animations, CSS transitions, and scripted animations (created in JavaScript). This book will primarily stay in the CSS-based world, and the following chapters will start you off right…I hope!