Logo animation has become more critical than ever. With the increased amount of mediums on which animations can be displayed, its demand to be included in a visual identity package has risen dramatically. Here I will be going over a few valuable concepts that lay a foundation for basic logo animation. I'll cover planning and idea generation for logo animations, plus some basic animation principles to keep in mind when animating.
This article is for those who already have a basic understanding of After Effects and are interested in learning more about logo animation and refining your techniques.
Planning and Idea Generation
Planning can often be the most challenging part of animating a logo. What should the logo do? How should it move? How can the message be conveyed? These are all questions that are part of the process. A key to narrowing down the process is defining the restrictions. Planning too much can overcomplicate the process. Remember, it's a logo, not a short film. Determining your constraints before you begin can be a helpful way to guide you in a direction. Here are some general rules to keep in mind when planning.
Keep the Message Simple
Adding a complex message into a logo animation can overwhelm the viewer and make the result less clear. Try to narrow down your ideas into one clear message or a simple set of movements. Setting the logo animation apart and making it impactful can be done through refinements and applying certain animation principles that I will go over later in this post.
Short and Sweet
Try to keep your logo animation from one to six seconds long. The length will vary project to project, but most logo animations will be used for immediate consumption. Creating an animation longer than six seconds restricts the usage and will likely be too complex more often than not.
Break it Down
Breaking down the animation into scenes, actions or a storyboard is an excellent way to start thinking about how the letters, logomark, or company characters will interact with each other. This breakdown can be done through storyboarding, but usually, an outline of scenes is sufficient. Here is an example of of how you might break down the scenes of your logo animaton in a storyboard format.
Stay True
Don't deviate from the original logo design. Adding additional designs, colors or elements to a logo is rarely a good idea. Stay true to the company and its visual identity. Generally, a logo will have all the elements you need to tell the story the original designer was trying to convey. You should also research the voice and tone of the company. Animation is a great way to reflect a brand's personality but can also easily miss the mark if you don't have a good understanding before diving in.
Consider the Context
Remember that most logo animations will be applied across different screen types, platforms, and mediums. Because of this, it's a good idea to keep the motion contained within the frame in most cases. For instance, generally it's best not to have an element enter from the left side and exit from the right. It would look strange if the animation placement were in the center of a website hero with no edge like there would be on, say, a television screen.
What Type of Story Are You Telling?
There are several types of stories you can tell when animating a logo. A few main story types are metaphors, neutral interpretations and illustrated stories.
Metaphors typically play off an existing element within the logo. If you designed the logo yourself, you already have the insight needed to animate the intended metaphor. If the logo is designed by someone else, make sure you work with the client or the original designer to see if you can get more information.
Neutral interpretations generally utilize the elements of the logo to create animation without telling a narrative. You may consider this route if you animate a wordmark with just letterforms or have a limited budget. It could be as simple as having each letter fade in and scale up individually from behind the logomark revealing the logotype.
Illustrated stories involve a bit more planning. They often use illustrated characters or objects in addition to the logo itself. Imagine an animated logo for a travel booking website. The animation might have a character that boards an airplane and takes off, flies into a sunset revealing the logo in its path. Because illustrated stories involve characters, the plot and scenes of the animation are usually more complex, requiring a higher skill level of After Effects.
Animation Principles
You may already be familiar with some of these animation principles if you have experience with video editing, web development or prototyping. If applied correctly, these animation principles will help make a basic logo animation feel more lifelike and take your animations from looking amateur to professional.
In this section, I'll be covering five of Disney’s 12 principles of animation. These principles were first introduced in The Illusion of Life in 1981 by animators Ollie Johnston and Frank Thomas, two of Disney’s “Nine Old Men.” The 12 principles were used throughout all of their films starting in the 1930s, and nearly a decade later, Disney (and all other animation studios) still utilize them today. Learning these principles is beneficial because they can be used when designing animated pieces, small or large.
Easing
Easing is one of the best and easiest (pun intended) ways to improve the motion of your animation. When creating lifelike motion, objects rarely have linear acceleration and deceleration. You should know a few different types of easing: ease in, ease out, and ease in and out.
A helpful tool to mention here is the Graph Editor in After Effects. If you are a beginner in After Effects, you may have used the Keyframe Assistant to add basic easing to your animations. The Graph Editor is an essential tool for customizing your easing to achieve a look and feel beyond the default easing in After Effects. There are endless ways to use this tool, and I would encourage you to explore and have fun with it.
Arc and Speed
Objects in the physical world travel through space with varying degrees of arc and speed. In nature, nothing travels in a linear path. When you are throwing a ball, it instantly begins losing momentum as the ball leaves your hand. As it loses speed, the arc of its trajectory increases, and it begins to fall to the ground. The higher you throw the ball, the greater the arc will be. It's important to keep in mind that the higher the speed, the more subtle the arc of the object will be. Imagine a fast pitch from a professional pitcher; there is minimal arc in the ball's trajectory. Remember this animation principle when animating logos and mimicking a real-world environment.
Squash and Stretch
The Squash and Stretch Principle, as the name suggests, is an object being compressed (squashed) or extended (stretched) due to a force that is being applied. This animation principle can help make the movement or impact of an object feel more natural. If an object transitions from a standstill to moving very quickly, the force may stretch the object. If it moves very fast and comes to an abrupt stop, it might squash. The amount will vary depending on the elasticity or density of the object. This is also a great mechanic for applying the degree of playfulness you want in your animation.
Anticipation
Anticipation is a key animation principle for creating an animation with personality. It gives life and character to the objects in motion. Imagine a mascot used in a logo that is being animated. If that mascot is going to run to the other side of the logo to apply anticipation, it might lean back to gain energy, pause slightly and then zoom to the other side of the logo. Rather than simply running over, the leaning back and pausing creates anticipation and gives the character a more lifelike movement.
Staging
Staging is the overall presentation of the objects in an animation. When it comes to logo animation, Staging is essential for directing the viewer's attention and making the animation clear to viewers. If many objects are moving at once, the animation may feel confusing, hectic and the overall message may be lost. If objects collide or animate on top of one another, the animation may feel messy and unrefined. When done correctly, the message or concept is conveyed to viewers as intended and with clarity.
Get to Animating!
Hopefully, this gives you some insight into foundational principles to apply to your logo animations. These will help provide your animations with more realistic and lifelike motion, clearer messaging, and an overall better final result. What are you waiting for? Animate away!