Animation Principles Flashcards
Squash and Stretch
Some objects, depending on their composition, can change shape as they come into contact with other objects—squashing and stretching as they interact with the world around them. For example, when a ball hits the ground, its mass, weight, and center of gravity don’t change, but its shape may contort.
In UI design, squash and stretch can be related to buttons; when you press a button, it goes into a ‘squashed state.’ This concept means we can assign interactive characters to any UI element—allowing them to change state as a result of certain actions.
Anticipation
Anticipation refers to the preceding of an upcoming action, or in other words, micro-animations that lead up to bigger actions. A great example of anticipation is hover-states. If you hover on a button and it turns a different color, it’s an anticipation that something will happen when you click on the button.
Staging
Staging, as you might have guessed, refers to setting the stage for an action. It’s a way of influencing the user to press a certain button or fulfil a certain action by ‘staging’ and organizing the elements in a specific way. For example, if you add a ‘you might like these’ feature on the checkout page of an e-commerce site, you may add an ‘add to cart’ button that sits apart from the other elements—making it the obvious button to press.
Follow through and overlapping action
Think about a cat getting ready to pounce on a mouse. Before it even jumps, its ears might be the first to move—followed by its front legs to offset it from the ground, and finally the hind legs once the momentum has built up. Even when it’s landed, parts of the cat’s body might still be in motion—with overlapping movements happening all at once. Mimicking this, UI elements can be made to move at different speeds or even overshot their action before coming to a resting position. The subtle difference in speed and acceleration of each element makes the page feel more natural.
Easing
Easing, also known as slow in and out, refers to the slow, gradual movement of UI elements. If you think about objects in real life, they don’t move abruptly—and neither should UI elements. A slight fade-in of an image is a lot more natural and comforting than having it appear out of nowhere.
Arcs
In real life, things rarely move in straight lines, but rather in curves or arcs. While interfaces are commonly designed on grids, arcs can be used to highlight an element’s path when creating responsive designs. For example, when switching from desktop to mobile, a button might collapse into a ball with a curved motion—rather than a straight line.
Secondary action
Secondary actions are actions that support and enhance primary actions, such as shoelaces moving up and down while a character walks in a cartoon. Most micro-animations can be classed as secondary actions, such as a button ‘pulsing’ once it’s been pressed.
Timing
Timing refers to the order in which UI elements are animated, as well as the sequence they follow. Depending on the function of the element, the time it takes to move has a direct influence on the mood and character of the interface. Animations that move too slowly may frustrate users, whereas animations that move too quickly may cause them to miss something important. Timing is perhaps one of the most important principles on this list, as it impacts and influences the users’ focus.
Exaggeration
In a user interface, some animations can be exaggerated to grab the users’ attention and add a stylized element to the page. Where the other principles on this list mimic the realism of actual objects, exaggeration is a chance to get creative.
Appeal
Even micro-animations need to be appealing to the user in order for them to serve their purpose. Adding charm to your animations with color is a sure-fire way to make even the most undetectable animation appealing.
solid drawing & straight-ahead vs. pose-to-pose
These are the two slightly less relevant principles for UI animation. Solid drawing refers to 3-dimensional animation. When treating the third dimension as an oversight, the symmetry of 2-dimensional animation can dispel the illusion of a 3-dimensional object. This is why it often comes as a shock to see cartoon characters face-on.
The straight-ahead vs. pose-to-pose principle refers to the difference between starting an animation with a pose and creating subsequent frames, and filling in frames between key poses.
What is Newton’s 1st Law of Motion?
Every object persists in its state of rest or uniform motion unless it is acted on by a force that changes that state
What is Anticipation?
An action that precedes and prepares for the main action.
- Physically required for some actions
- Helps with clarity, signal before main motion
- Subvert expectations
What is overlapping action?
aka “follow through” includes “overshoots”
What is secondary action?
aka adding “texture” includes idea of “plus-ing”
