What is animation: a guide to its history and modern use in design - 99designs (2024)

There was a point in everyone’s life when animation was just the coolest thing you’d ever seen. Whether it was a Disney movie as a kid or maybe a 3D game cutscene that blew you away, there was always something spectacular when imaginary characters move and act as in real life.

And don’t think that power went unnoticed by graphic designers.

In the digital era, animation can do more than just entertain children with a boat-driving mouse. It’s an effective tool for visual communication. Of course, it offers a whole new medium for expression and creativity, but on a more practical level, the movement of animation attracts more attention than static images. And considering the restraints of live footage, sometimes an animation of a bouncing ball works best.

In this article, we give an all-encompassing animation overview. We discuss animation for designers and give some techniques from the heyday of cartoons a much-needed update for the modern era. We also showcase the business side of animation, explaining how it can improve both the UX of your website and the effectiveness of digital marketing campaigns. So without further ado, let’s get moving!

What is animation?
—

Animation is the capturing of sequential, static images—drawings or photos of inanimate objects—and playing them in rapid succession to mimic real world motion. If you’ve ever seen a flip book, you know how it works.

But chances are, when you ask “what is animation?” you want something more than a technical definition. Where did it come from? What’s the appeal?

Although the idea of sequential art dates back thousands of years—more, depending on your interpretation of cave paintings—animation as we know it was only made possible by the invention of the film strip. However, the optics behind animation has been known since the early 1800s, as we see from Simon von Stampfer’s phénakisticope (1833) below.

On of the first animation on film was actually hand-painted by the French artist and inventor Charles-Émile Reynaud on his Praxinoscope—one of the stepping-stone inventions that led to the film camera.

For the first part of the 1900s, artists from all over the world experimented with animation, such as the recently discovered Katsudō Shashin, dated from 1907 to 1911 and said to predate much of Western animation. However, animation was thought of mostly as a novelty until the era of Walt Disney in the 1920s, when sound was beginning to be implemented in movies. Steamboat Willie (1928), Disney’s “flagship” cartoon, was not the first cartoon with sound, but it was one of the most popular at the time.

By the 1930s, other studios caught on that there was money to be made through animation, the impetus behind Warner Bros. launching Looney Tunes and Merrie Melodies. The 1930s saw friendly rivalry between Mickey and Bugs — known now as the American Golden Age of Animation — which culminated in a Disney’s power play Snow White and the Seven Dwarves, the first feature-length film to be made entirely of hand-drawn images.

The rest is history. With the popularization of color TV in the late 1950s, another American animation pioneer Hanna-Barbera entered the scene. Following the 1960s cultural revolution, animation was co-opted for adults, most famously the X-rated Fritz the Cat (1972) based on the work of legendary comic artist Robert Crumb. Finally, in the 1990s, computer generated imagery (CGI) was able to compete with hand-drawn animation, popularized by the first completely-CGI film Toy Story (1995).

Considering the wide-ranging history of animation, we see its appeal is wide-ranging as well. Kids love it, of course, because most of the stories for children involve talking animals, tea kettles, or visuals otherwise impossible to bring to life.

But the more sophisticated the animations techniques become, so too do the themes they discuss. While CGI is used in almost every movie today, even completely animated features can appeal to adults—just look at popular animated sitcoms like The Simpsons, Family Guyor South Park.

Perhaps the greatest strength isn’t that it appeals to different groups, but all groups at once. Animation allows artists to invoke that childlike wonder and awe of not believing our eyes, but to harness that power for more mature storytelling and even business, as we explain below.

How can this visual technique appeal to both our inner child and our discerning adult at the same time? Just look at practically any Pixar movie. This is a safe space—are you going to tell me you didn’t get misty-eyed during the first ten minutes of Up?

Animation overview for business: Looney Tunes for financial boons
—

Outside of film and TV, animation is becoming a favorite technique of businesses in the digital space. In particular, animation enhances web/app design and digital marketing campaigns with its practical benefits just as much as its entertainment factor.

Motion graphics (that is, animating elements like typography, icons, on-site images, etc.) aim to explain concepts using movement, such as animated objects in web design. While not as focused on storytelling as animated videos, motion graphics still encapsulate many of the benefits of animation, but in a different way. Placing motion graphics in the right spots on a website can actually make your site function better, to say nothing of the secondary delightful benefits: teaching the visitor how to use the site quickly, effectively and visually.

Let’s say you’ve just added a brilliant new feature, but analytics show no one is clicking it. The problem might be they don’t see it—regular users are so accustomed to how the screen used to look, a new addition might go unnoticed. Quick fix: add slight animation to the new feature, whether making the icon move or maybe a pulsing notification dot.

Using animation like this can have a great effect on UX. You can add animated flourishes to the most popular page options to make sure users see them if they need them. You can direct more attention to calls-to-action to boost conversions. You can use animation to confirm an action (i.e., a button that moves when clicked). Motion graphics can even just add a bit of fun, as with easter egg visuals that move when users hover over them.

One of the best benefits of motion graphics is communicating cause-and-effect to users, particularly with gesture controls on mobile device. Think of Tinder’s iconic swiping—the animation of the the page being dragged left or right strengthens the illusion of interactivity. It feels like you’re actually moving something. Imagine if, when you swiped, the screen just blinked and loaded a new profile. The app wouldn’t be anywhere near as fun.

There are many more ways to use animation for business, but take a look below at some of the common instances:

• Explainer videos—One of the most popular uses of animation in modern business, animated explainer videos add playfulness to otherwise dull, unamusing instructional videos. Businesses can explain the finer points of their services without being boring. The only downside is that this trend has become so popular that businesses should opt for more experimental and unique animation styles to stand out.
• Loading pages—No one likes to stare at an empty screen. Loading page animations not only mitigate the damage of loading times, and the risk of your user bouncing, they also provide the opportunity to show off your brand personality or make your user laugh. Sometimes people remember a loading animation more than the actual site!
• Transitions—Anyone who’s used an old computer knows how jarring it is when new windows open without any ceremony. Animated transitions—swipes, wipes, gradient fades, shrinking, etc.—play on the biology of the human eye to make visual changes as seamless as possible, adding the site or app’s overall immersion. Even minor visual changes like drop-down menus benefit from a little animation.

• Microinteractions—Motion graphics have plenty of UX benefits. If you’re having trouble with your interface design, adding some animated microinteractions could fill in the cracks of your UX. For example, adding an animated effect to a call-to-action can improve conversions.
• Social media videos—The heart of animation is to entertain and tell a story, so sometimes you should make animated videos just for their own sake. Creating an animated video for social media can help small brands get noticed and help big brands stand out in their followers’ feeds.

• Ads—Advertisem*nts, too, benefit from the attention animation attracts. Especially banner ads, which need as much magnetism as they can get to counteract banner blindness. With the right animation style you’re sure to convert—just ask Launchpeer, who proved this point with their animated Instagram ad.
• Animated logos—While orthodox advertising dictates “never change your logo,” today’s branding experts say animation is the exception to the rule. Responsive and animated logos—logos that change depending on how and where they’re used—have been proven more effective than static ones.

But so far we’ve just been talking about the theory behind using animation. Let’s go over the specific types of animation and how you can use them.

Types of animation
—

Let’s start off by explaining that “animation” is really an umbrella term for a variety of different techniques of adding movement to images (or inanimate objects). Although there are more, here are the four main ones designers find most useful:

1. Traditional animation—Each frame is created individually, and then run sequentially for the illusion of movement. This is the historical root of animation, but its cost and time-commitment are the reasons animators developed more modern methods.

2. 2D vector-based animation—More advanced software lends its support to traditional animation. The principle is the same, but Flash and other vector-based animation tools generate many of the individual frames based on the animators’ input.

3. 3D animation (CGI)—A whole new way approach to animation, where computers generate all the imagery and animators input the movement and angles. CGI animation is said to be closer to puppetry and traditional animation—the animators focus more on controlling the movements and leave the visuals up to the computer.

4. Stop motion—Individual frames are captured by manipulating and photographing real objects; most commonly known as claymation, but it can be used with more than just clay, as you can see below. Although its as costly and time consuming as traditional animation, the final results often have a unique and priceless look.

The style you choose depends on your goals, brand personality and budget. Making a stop-motion explainer video might help yours stand out from the sea of generic ones, but making a stop-motion interface for your website… perhaps not so much.

By now you should have an idea of how animation can benefit your business, and maybe even a few plans for how to use it. Check out our ultimate guide to video marketing to learn more!

But having animation isn’t enough—it has to be good animation. And for advice on how to make quality animation, who better to ask than Disney animators during the film company’s golden age.

Animation for designers: Digitizing the 12 Disney commandments
—

In 1981, two top Disney animators Frank Thomas and Ollie Johnson wrote what many consider to be the bible of animation, The Illusion of Life. Compiling the expertise of Disney animators since the 1930s, this book set out to give animators a solid foundation for their craft, addressing areas like replicating real-world physics, emotional expression and character design.

At the heart of the book are the “12 basic principles of animation.” While this list of best practices was intended for traditional animation, most still hold up just as strong in the digital era… with a few updates here and there.

1. Squash and stretch

How an object responds when it touches another object—how it squashes and stretches—communicates its rigidity and paints a better picture in the minds of the viewer. Think of a how a rubber ball squashes when hitting the ground versus how a bowling ball doesn’t.

This effect can be exaggerated for comic effect, or maintained realistically for more life-like animations. The one golden rule for both styles, though, is that the total volume of the object never changes, it just gets redistributed.

This principle remains just as valid when dealing with abstract objects in a digital space, like bouncing icons. You can choose any point you like on the spectrum between cartoony and realistic, as long as you account for this real-life law of nature.

2. Anticipation

In real life, people and things don’t just move suddenly and without warning. Before someone throws a punch, they wind up their arm; before they jump, they bend their knees. If your animation happens without an anticipating action, it may seem too sudden and jarring—in other words, fake.

For web design, this means extra emphasis on the pre-animation state. For example, if you want to animate a button being pushed, you need to design the button itself so that it appears raised or “push-able.”

3. Staging

This principle is borrowed from theater: staging is where the actors are placed on stage for maximum effect. From the audience’s perspective, actions in the front of the stage seem more significant than those in the back.

Animation, though, is more cinematic than theater, so this principle can also account for lighting and angles. For online animation, consider adding drop shadows or shifting the angle to achieve the best look.

4. Straight-ahead vs. pose-to-pose

This principle refers to the method used for animation—starting with the initial pose and creating sequential, vs. creating the key poses throughout the sequence and then “filling in” the frames in between them.

Most computerized animation uses the pose-to-pose approach since the computer generates the “inbetweens.” However, if you’re suffering from designer’s block, the straight-ahead method could help you come up with ideas.

5. Follow through and overlapping action

These refer to two different, but related, principles for capturing realism. “Follow through” deals with inertia, and the concept that when a body in motion stops movement, some parts continue to follow through. If a running woman in a dress suddenly stops, parts of the dress will continue to move forward thanks to momentum.

“Overlapping action” refers to how different parts of an object move at different rates—when we walk, our left side and our right side do their own things and are rarely in perfect sync.

Both of these concepts should be considering for abstract objects as well. It’s little flourishes like this that can add that “little something extra,” and failing to account for these makes your animation look stilted and robotic.

6. Slow in and slow out

This refers to a technical aspect of animation. For starters, you can slow down the action in animation by adding more frames, and vice versa. So when an object accelerates and decelerates, you want to add more frames, and during the middle of an action you want to use less frames. That makes the action ramp up and then down.

7. Arc

In an attempt to create more natural movement, animate motion in an arc trajectory. Most objects in the real world tend to move in arcs anyway—consider da Vinci’s Vitruvian Man. Creating motion along arc trajectories may seem obvious, but if you forget, your animation will seem slightly “off.”

The good news is that some animation software allows you to set motions lines yourself, so with the right tool this principle is easy to apply.

8. Secondary action

This principle is a little more complex than the others because it involves striking a balance. The idea is that, when part of an object moves, usually other parts move as well. When you walk down the street, you don’t keep your head and eyes fixed directly ahead; you look around, nod, blink, etc. These secondary actions can make your animation seem more lifelike—but keep them subtle so they don’t distract from the main action.

This principle is similar to “Follow Through” above, but a secondary action is not necessarily related to the main action. You can see both in the example above: the secondary action is the subject’s blink, the follow through is the way his torso bounces ever-so-slightly when his feet hit the ground.

9. Timing

As we said above, adding frames to your animation slows it down, removing them speeds it up. Animators should be particularly conscious of this as a way to communicate things like weight, agility or even personality in the case of facial expressions.

In other words, don’t leave the speed of your animation up to chance. Consider the timing or real objects and pace your animations accordingly.

10. Exaggeration

Even the most realistic animations are still fantasy… and that’s precisely why we love them. Animation allows artists to exaggerate real life for effect—just look at any Tom & Jerry cartoon. Don’t shy away from using exaggeration to get the exact amount of silliness you want. For example, look at the wheels in this animated loading screen, not to mention the individual carriages in the Ferris Wheel. Having no exaggeration at all, you might as well film live video.

11. Solid drawing

Drawing its name from solid geometry, solid drawing means accounting for three dimensional space. Especially when dealing with 2D variants of animation, it can be easy to forget about all three dimensions (and some cartoons ignore them outright—that’s why the rarity of seeing Simpsons characters straight on is so unnerving).

In particular, The Illusion of Life warns against creating characters whose left and right sides are identical. Such oversights can dispel the immersion.

12. Appeal

More of a artistic concern than a technical one, you want to give the subjects of your animation an appeal to make them worth watching. It could be something basic like a bright color, or something more creative like wide Anime eyes. The point is that no one wants to watch an animation about something bland.

The example here has a charming and unique style that blends realism with cartoons, giving it the appeal of “I haven’t seen that before.” That benefits the business side as well, considering it’s a logo for a real person.

Bring your designs to life with animation
—

No matter what, animation is an involved process. Drawing one well-made picture is hard enough, let alone thousands. That’s why animation is more of a lifelong discipline than something artists dabble with on the weekends.

But it’s a discipline that is well worth the effort. Not only does animation have clear benefits for business and design, it is a truly magical art form that can transport any mundane project to the heights of imagination. Give animation a try, and you’ll wonder how you ever managed to sit still in the world of static design.