Welcome to the real world
Now that you're starting to get the hang of animating with transitions, let's take a moment to look at a few things that you can do to create more natural and engaging animations. That isn't to say that there's anything wrong with the animations we've created up until now, they're perfectly acceptable. But seeing how we've only been using the most basic of the transition properties, we've unknowingly left a lot of things at their default settings.
And the default settings are ones that produce perfectly smooth, uniform animations. And perfect movement can actually be too perfect. You see, nature is entirely too full of chaos to produce perfect movements. We are surrounded by invisible forces, adding noise and aberrations to everything that we do. We're bound by the laws of physics. Objects have mass and must accelerate and decelerate. Movements, on some scale or another, flutter, and dodge, and dive. Our brains interpret irregular motion as natural, so leaving our animations at their defaults comes at the risk of them feeling artificial or robotic.
You add animation to websites to create a more immersive and engaging experience for users, whose brains are programmed to expect imperfections. To create a more engrossing experience, you need to breathe some life into animations.
The nine old men - founding fathers of animation
Through the production of its most iconic films, such as Snow White and Cinderella, Disney had a core group of animators that became known as "The Nine Old Men," who were responsible for developing the style and techniques that made those movies so iconic.
Two of those nine men, Ollie Johnston and Frank Thomas, wrote a book together titled The Illusion of Life, in which they laid out their methods for creating vivid and appealing animation through what they called the "12 Principles of Animation." Although they were framed within the setting of traditional, hand-drawn animation, they've been adapted to nearly every other genre, and are perfectly relevant to creating CSS animations as well.
Let's take a quick look at each of the 12 principles.
Squash and stretch
This principle helps depict an object's mass and momentum, stretching the object's form as it accelerates, and then flattening and widening as it decelerates. Imagine a rubber ball bouncing on a hard floor, flattening out before springing away back up into the air.
Notice how the box stretches horizontally as it accelerates, and squashes from the rapid deceleration as it hits the wall.
Anticipation
Think of anticipation as a visual foreshadowing of an action to come. A cat coiling and wriggling before pouncing. Cocking an arm back before throwing a ball. Robots move from position to position. Creatures rely on preliminary motion to help gain leverage and power making movement without anticipation seem stale and artificial.
Staging
Staging, with respect to animation, can best be described as composition. It guides the user's eyes to the most important parts of the screen through motion, such as highlighting a button you want them to click on:
Straight ahead and pose-to-pose
Straight ahead and pose-to-pose are two different ways of executing traditional, hand-drawn animation, and don't apply literally to animating for the web. However, within CSS, there are two methods for creating animations: the transitions you've begun to learn about, and keyframes, which we'll cover in a bit. Transitions are based on a starting and ending value that the browser animates between. But with keyframes, you'll learn how to add in stages, or poses:
Follow through and overlapping action
Real objects don't have uniform density and mass, and thus will accelerate and decelerate at different rates. Think of being in a car and having your head snapped back into the headrest as it accelerates. Or having your head bounced forwards if the driver slammed on the brakes. Without follow through or overlapping action, you would remain static within the car as it changed speed. By giving different parts of an object different velocities, animations feel more authentic:
Slow in and slow out
Also known as ease in and ease out, this principle is based on the fact that physical objects don't simply start and stop instantaneously. They accelerate and decelerate. Slow in refers to the acceleration of an object, and slow out refers to deceleration. Applying different values to eases can change the perception of size or mass of an object. You can make things seem zippier or more cumbersome depending on the profiles of the acceleration and deceleration:
Arc
It's said that nature doesn't make straight lines, and natural movements are no exception. This is a bit trickier with the web's box model, but introducing some arcs into the motion of objects can make them feel more natural:
Secondary action
Adding individual animations to separate pieces of a scene can help to accentuate or strengthen the primary elements of the animation:
Timing
Objects should move at believable rates in comparison to their sizes and mass. A semi-truck is going to accelerate and decelerate more slowly and evenly than a Ferrari, which can get up to speed in the blink of an eye and stop on a dime. You control the timing of objects through their relative sizes, duration of an animation, as well as ease-in and ease-out profiles:
Exaggeration
While trying to keep animations relatable, making them too realistic can result in dry and unappealing motion. Pushing principles of animation a bit beyond the natural limits can help to bestow them with character and personality:
Solid drawing
Traditionally, this principle refers to properly realizing a scene, such as perspective, etc. It's about accurately structuring animation code. It's critical that you understand the ins and outs of the properties that you are using to ensure that your animations are playing back as desired. If you don't build your code with animations in mind, it can be easy for something like this:
To accidentally turn out like this:
Appeal
In a word: charisma. Adding small flourishes to animations can help make them more dynamic and engaging to users. The life of the party is the life of the party because they attract the attention of the room. It's their appeal and charisma that draws attention to them and keeps it there:
Throughout this course, you'll learn how to harness the power of CSS transition and animation properties to incorporate parts of these 12 principles into your own animations, and create more authentic and engaging experiences for users.
Let's recap!
The 12 principles of animation are:
Squash and stretch
Anticipation
Staging
Straight ahead and pose-to-pose
Follow through and overlapping action
Slow in and slow out
Arc
Secondary action
Timing
Exaggeration
Solid drawing
Appeal
Can you define each of them? 🧐
