Animations can add a lot of character to your designs, while also improving usability by giving users feedback on actions they take. Understanding the basics of animation theory is the first step in implementing useful animation into your designs.
So what is an animation? Put simply, it’s a series of static images, either illustrations or photos, that are linked together to mimic real-world motion. We think of movies (live action or animated) as having continuous motion, but even blockbuster films are simply a series of still frames, generally recorded and replayed at 24 frames (images) per second.
There are a few types of animations: traditional, 2D, 3D, motion graphics, and stop motion, with some overlap between them (for example, 3D motion graphics).
Animation Building Blocks
There are a few building blocks that go into any animation: the timeline, keyframes, duration, and delay. Regardless of what kind of animation you’re creating, you’ll find these four elements.
The timeline controls how an animation flows within most animation software. It lets you control all of the other aspects of the animation, including adding or removing keyframes, changing the timing or easing, and other ways to manipulate the animation.
Keyframes define the state of an animation at a specific (key) moment in the timeline. Consider how early animated films were created. To make Mickey Mouse wave his hand, for example, the artist needed to know its position in each frame. Most of the time this was achieved by creating the frames for the start and stop points of his hand (the keyframes) and then filling the frames in between to create what appears to be fluid motion.
The duration of an animation tells us how long it will last. Fast animations are less noticeable than slower ones, though if you go too slow it may frustrate users. Ideal durations, depending on the complexity of the animation, are usually in the range of 100–500ms.
The animation’s delay tells us when the animation starts. If the delay is set to 0, the animation will play immediately once triggered by a user action or page load. If the delay is set to a positive number, the animation will start at some point in time after the trigger. If it’s a negative number, the animated object will appear to already be in motion when triggered.
Bézier Curves and Animation Effects
There are a number of effects you can apply to an animation to make it visually interesting. These are applied using bézier curves to influence how the animation behaves.
Linear curves are the most basic animations, and despite the “curve” in their name, they’re actually a straight line. Animations that follow a linear curve have the same velocity from start to finish, progressing at a consistent speed.
Animations that progress following a linear curve appear mechanical at best and unnatural at worst. In the real world, objects follow the laws of physics when it comes to things like momentum; they start slow, then speed up, then slow down or stop. However, linear curves can be useful in things like color transitions.
An easing curve defines how quickly an animation’s speed progresses over time. Imagine dropping a ball. It starts out slowly when it leaves your hand, but progressively speeds up, then stops when it touches the ground. Easing can help to simulate this effect on digital objects.
There are three basic kinds of easing curves: ease-in, ease-out, and ease-in-out.
Ease-in curves start out slowly and gradually speed up. If you’ve ever been on a roller coaster, you’ll know that they slowly pick up speed until they reach the top of a hill before quickly gaining momentum going down the hill to throw you around the loops and curves ahead. That’s the same idea as an ease-in curve.
While ease-in curves are more natural than a linear curve, the way they abruptly end isn’t the most natural motion. They’re a great option for elements that complete their animation offscreen, though.
An ease-out curve is the opposite of an ease-in curve. They start out fast, then slow down and end gradually. They’re more realistic, as they remind us of real-world actions like throwing a ball. If your animation will end onscreen, an ease-out curve is an excellent choice for creating a snappy, pleasing animation, and can feel quite responsive.
You can probably already guess how an ease-in-out animation behaves. They start out slow, gain momentum toward the middle, then slow down again before stopping. Ease-in-out curves don’t have to be symmetrical, though. Google’s Material Design specifications recommend an asymmetrical curve to accentuate the animation, where they ease in faster than they ease out. While these animations can appear the most natural and responsive, be careful that you don’t make them too short.
Not all objects in the real world move smoothly like easing curves do. There are two other types of motions you’ll want to master: the spring and the bounce.
In a spring animation, motion mimics the natural movement of springs. Pushing or pulling them stretches or compresses them, while after you let them go they continue oscillating back and forth until settling in their final state. One thing to keep in mind with spring animations is that the object can move past its start and end points, much like a spring oscillates in real life.
Bounce animations are similar, but in a bounce there’s a definite stopping point, or target value, that the object doesn’t overshoot. Think of a ball bouncing on the ground. It stops the second it hits the floor before rebounding back up.
It’s easy to think of animations as purely decorative, but as already mentioned, they can provide valuable user feedback. They can also direct the user’s eye to important elements on the page by grabbing their attention.
Experiment with different types of bézier curves in your animations to find the one that looks the most natural for the type of object you’re animating. Animations can be as complex or simple as you want, but there is such a thing as overdoing it. Sometimes, less is more.