Get Started with Animation: Essential Tips for Designers

• Animation in Design
• Animation Tips
• Design Career

If You’re a Designer That’s Looking to Start Animating, This Is for You

Animation has become increasingly relevant in digital design, requiring designers to expand their skill sets to meet market demands. In this article, we will explore fundamental principles of animation that every designer should know before diving into motion graphics. By understanding these principles, you can enhance your career opportunities and create engaging animations. Let’s take a closer look!

1. Squash & Stretch

Squashing and stretching involves altering an object’s shape to convey its material and maintain volume consistency. While animation allows for some exaggeration, consistency remains essential.

As the animation unfolds, the button undergoes a transformation combining squashing and stretching motions resulting in the button’s appearance dynamically changing.

In contrast to other elements in the animation, the icons inside the buttons do not squash or shrink and maintains their proportions and solidity throughout.

They remain unchanged in shape and size, serving as a stable visual anchor amidst dynamic transformations.

2. Anticipation

Anticipation is a principle employed in animation to trigger expectation through a pre-motion preceding the main action. It contributes to a cohesive and impactful result, fostering anticipation in viewers for upcoming actions.

As the animation begins, the speedometer’s indicator subtly moves backward, hinting at the imminent acceleration. This action not only adds visual interest but also generates suspense, signaling to the viewer that something significant is about to happen. 

3. Ease In & Ease Out

Easing refers to the gradual change in speed during an object’s motion. When you ‘ease in’ or ‘ease out,’ animation software uses interpolation systems to calculate a curve that allows the object to slow down before stopping or accelerate before starting another action. This creates the illusion of speed and movement, as well as significantly impacting time, space and overall animation quality.

In this animation, “scrolling” blocks smoothly enter the scene, gradually speeding up to convey the idea of acceleration, while their exit involves a gradual deceleration until they disappear. This dynamic use of speed adds fluidity and realism to the animation, making it visually appealing.

4. Animation Flow

Animations typically follow a structured process that begins with a starting pose and transitioning into the motion phase where the primary action occurs. Next, the response phase shows how the character or object reacts to the previous action.

The timing of the response in animation, whether immediate or delayed, can be adjusted to achieve the desired effect. It is important to consider the intended impact when deciding on the timing. The animation reaches its conclusion with a final pose that encapsulates the overall action or message.

5. Arcing

Arcing is used in animation to recreate organic and realistic motions. Arches consider the influence of gravity and add weight and believability to animations.

The animation shows an item being selected and following a curved path resembling a classic arc as it goes towards the shopping cart, effectively employing the arcing principle to create a lifelike animation.

6. Follow Through

A follow through, known also as overshoot, refers to the responsive action that occurs after a motion. It is the final motion in the Pose > Anticipation > Motion > Follow Through > Pose flow pattern. 

Implementing follow through actions gives animations realism and weight.

This animation shows an interface resembling that of an ebook reader, featuring a page-turning motion and a progress bar with a pin, to visually signal advancement in the reading of the book.

As the page changes to the next, the pin exhibits a realistic movement that brings a dynamic and interactive feel. When the motion comes to a stop, the pin exhibitions a realistic follow through motion, creating a seamless and visually pleasing transition back to the pose state.

Study Real Movements

Last but not least, it is worth to mention something that is more a suggestion than a principle, which may seem obvious but still needs to be remembered: before creating an animation, it is important to observe how things move in nature, study how humans interact with each other and take into account the laws of physics to to give your animations a better grounding.

Now that you are familiar with these essential animation principles, it’s time to select a designer-friendly animation tool and start applying these principles in your work. By mastering these techniques, you can create captivating and engaging motions that will help you get your footing in animation.

. . .

• Subscribe to our Magazine Newsletter. 
• Follow us on Facebook and LinkedIn.
• Join our community on Slack and Facebook.