Creating Web Animations

Chapter 5. Ensuring Your Animations Run Really Smoothly

For the longest time, creating smooth and highly performant animations using only web technologies was very difficult. The browsers were slow, CSS properties weren’t optimized for rapid updates, the graphics card didn’t do much work, you had to walk 15 miles in the snow to get to school, and so on (see Figure 5-1).

You remember those days, right?

Figure 5-1. What a browser looked like back in the day

Fortunately, nowadays those problems have mostly gone away. While you still might have to walk 15 miles to get to school (in the snow, barefoot, wolves chasing you, etc.), our browsers have gotten really good about helping ensure our animations don’t jitter, lag, tear, or exhibit any other unwanted visual side effects that are jarring to see.

Now, this doesn’t mean we can pack our bags and go home. Our browsers provide you with all the controls to create animations that run well, but you need to know which controls to fiddle with. Don’t worry—that’s where this chapter comes in! In the following sections, you’ll learn how to ensure your animations run really really well.

What Is a Smooth Animation?

Before we start digging into the code, let’s step back for a moment and clarify what we mean by a smooth animation. At a high level, there are three major things smooth animations have going for them:

They are responsive.

The ...