September 5, 2024
As most of you already know, showing something is much faster than explaining it. That’s why graphic designers are increasingly tasked with creating animations to communicate ideas effectively.
Whether it’s a social media post, a promotional video, or an engaging web banner, knowing how to make your animations impactful is key to connecting with your audience. So let’s have a look at the 12 principles of animation, and explore how you can apply them to create animations that resonate with your audience.
1. Squash and Stretch
This principle adds a sense of weight and flexibility to objects. For instance, when animating a bouncing ball, apply squash as it hits the ground and stretch as it ascends. In After Effects, you can easily adjust the scale of your object to achieve this effect.
Application: Imagine a logo that bounces onto the screen. Using squash and stretch can make the logo feel lively and energetic, which can make the brand feel more approachable and fun.
2. Anticipation
Anticipation prepares the audience for an action, making the animation more realistic. For example, before a character jumps, they might bend their knees. If you work in marketing is quite unlikely you are animating a character, but you can apply this principle to text In After Effects, you can create anticipation by slightly moving an object in the opposite direction of its intended motion.
Application: Before a text slides into view, have it pull back slightly before moving forward. Or if an object of text is about to scale up, make it shrink in size before growing. This small touch can create a more engaging and fluid transition that keeps the viewer’s attention.
3. Staging
This principle is about directing the viewer’s attention to the most important part of the scene. In After Effects, you can use composition, lighting, and focus to emphasise key elements.
Application: When showcasing a product, use blurring and lighting effects to fade out distractions and bring the product into sharp focus. This ensures that your audience’s attention is exactly where you want it.
4. Straight Ahead Action and Pose to Pose
These are two contrasting approaches to animating. Straight-ahead action involves drawing or positioning frames in sequence from start to finish, while pose-to-pose focuses on defining key poses first. In After Effects, pose-to-pose asked to set keyframes for important movements.
Application: Use pose to pose when animating a logo transformation, defining the start and end points clearly. This ensures smooth transitions, making the animation feel deliberate and polished.
5. Follow Through and Overlapping Action
This principle adds realism by having different parts of an object or character continue moving even after the main action has stopped. For example, if a character stops running, their hair or clothing might continue to move slightly. Or like in the example below when the TiVo Logo land the jump his antennas keep moving.
Application: When animating sliding bars, consider adding a subtle delay in the movement of each bar, creating a fluid and organic feel.
6. Slow In and Slow Out
Objects in the real world don’t start or stop moving abruptly—they accelerate and decelerate. This principle, also known as “easing,” can be easily applied in After Effects by adjusting the keyframe velocity.
Application: Use slow in and slow out when animating text appearing on screen. Start with a gradual increase in speed and slow down as the text comes to a stop. This technique makes the movement more natural and pleasing to the eye. Extra tip in AF you can Also add motion blur.
7. Arc
Most natural movements follow an arc, rather than a straight line. In After Effects, you can use motion paths to create arcing motions, making movements more lifelike.
Application: When animating an object like an icon that needs to move across the screen, consider using a curved path instead of a straight line. This can make the animation feel smoother and more natural.
8. Secondary Action
Secondary actions are minor movements that complement the main action, adding more dimension and realism. In After Effects, this could be an additional element that moves or changes due to the primary action, like in the example below where the bouncing of the cube emphasises the appearance of the text.
Application: If you’re animating a character waving, adding a subtle sway to their body can enhance the believability of the action. In a marketing context, a product slide-in could be accompanied by a subtle glow or shadow shift to make the action more compelling.
9. Timing
Timing controls the speed of an action and is crucial in setting the tone and mood of your animation. In After Effects, timing can be adjusted by altering the duration of keyframes.
Application: For an urgent promotional message, a fast-paced animation can convey excitement and immediacy. Conversely, a slow, deliberate animation can create a sense of luxury and elegance, which is ideal for high-end products.
10. Exaggeration
Exaggeration is about pushing movements further to make them more dynamic and interesting. While realism is important, a bit of exaggeration can make your animation more engaging.
Application: In a corporate video, exaggerated transitions can add a sense of drama and highlight key points.
Who Are IF? from immediate future on Vimeo.
11. Solid Drawing
This principle is quite hard to correctly apply in traditional 2D drawing because it asks for a visual representation of the volume and weight of the physical 3D space, for After Effects, it translates to understanding space and proportion.
Application: When creating motion graphics, ensure that elements are well-balanced and proportioned. For example, when animating infographics, keeping a consistent style and ensuring elements are correctly aligned will make your animations more professional and easier to follow.
12. Appeal
Appeal refers to the charisma of the design and how visually interesting and engaging it is. Even complex information can be presented in an appealing way with the right use of animation
Application: In After Effects, you can enhance appeal by using colour theory, typography, and smooth transitions to make your animations more attractive. For instance, animating a company’s brand colours playfully can make a corporate message more relatable and memorable.
By incorporating these principles of animation into your work you can elevate your graphics and make them more impactful. Whether you’re creating a simple animated logo or a complex infographic, these principles will help you communicate more effectively with your audience, ensuring that your messages are not only seen but also remembered. Contact us if you truly want to step up your presence on social media.