Disney's 12 Principles of Animation is one of the inestimable guides when traditional animations are considered. It was put forth by Ollie Johnston and Frank Thomas in their book - The Illusion of Life. These principles were originally designed for traditional animations like character animations. However, these principles can still be applied in designing interface animations. So, this is just a curious attempt to relate some of those principles in designing interface animations.
Squash and Stretch
In animation, 'Squash and Stretch' represents an object's gravity, mass, weight, and flexibility. A bouncing ball in a scene which stretches when it hits the ground is Squash and Stretch.
In interfaces, this technique can be easily related to buttons. A button's pressed state is Squash. By controlling Squash and Stretch, we can easily define a character to the buttons. Other than buttons, this can be applied to any interacting element in an interface.
Buttons which squashes and stretches on interaction.
Squash and Stretch applied to a sidebar.
Anticipation
Anticipation informs the viewers about what's going to happen. It precedes the action that is happening next. A character bringing his arm back before releasing a javelin is anticipation.
In interfaces, hover states are fine examples of this. Whenever we hover on elements, certain elements react to it indicating that it is clickable and something is going to happen on clicking it.
Interactions on hover usually inform us that there is an action happening next.
Interfaces which involves horizontal scrolling usually tend to reveal a part of the next element that would appear on scroll/swipe. This is a good example of anticipation since it reveals the info about the next thing.
Timing
In traditional animation, timing informs how the frames are drawn. More the frames, smoother and slower the animation is. Timing also gives mood and character to the objects.
Timing is a fundamental aspect of any interface animations. Timing along with easing function plays an important role in motion choreograph. A lengthy transition makes your users wait too long. On the other hand, your users may miss something if your animations are too fast. Usually, most of the interface animations lie between 200 - 600ms. Interactions like hover and feedbacks are around 300ms and elaborated motions like transitions are around 500ms. You can refer to Material Design, which has a good explanation of durations for each type of animations.
Several design systems (like Carbon and Lightning) have considered motion as an important aspect and formulated specs (timing, easing etc) for each type of transitions.
The transition on the right makes the user wait too long.
Slow In and Slow Out
Most objects in the real world will speed up and slow down as it moves. Unless there is something in the way there isn't any abrupt movement. For example, a free-falling object starts slowly and then gains momentum.
The cards on the left have no easing. You could see that the transition on the right seems more natural.
Adding easing to your interface elements gives more life and makes them appear more natural. Timing and easing alone can be used effectively to define your motion systems.
Staging
Staging choreographs the scenes. That is, how the objects are placed in a scene, how and when each animation is taking place and so on. It directs the attention towards the most important objects in the scene.
In interfaces, staging decides where the elements are placed and how they are choreographed when an interaction happens. It directs the user's attention to the intended element.
Consider a music app which suggests music based on our interest. So the important thing that the app has to do is to make the users like a song if they want to listen to similar types. So, it is necessary to stage the LIKE action separately from other choreographed elements.
Arc
A ball thrown from a height follows a parabolic path. Arcs make things more natural.
In interfaces, elements which are following a diagonal path can be made more natural by following an arc. Arcs can be used when you want to highlight an element's path.
You could see the element following an arc looks better than the diagonal one.
Secondary Action
In animation, secondary action is used to support or enhance the primary action of an object. The motion of a character's head while walking is a secondary action.
In interfaces, secondary action can be used to make primary actions more prominent. These are useful in places where an element needs to give feedback to the user. All micro-interactions are based on secondary action principle.
The secondary reaction from the particles enhances the primary button's action.
Exaggeration and Appeal
Important characters in the scene must be appealing and at the same time, certain actions can be exaggerated to gain more attention.
In interfaces, important interactions can be exaggerated to gain users' attention. FAB in material design is a good example. The static state of the FAB itself is appealing since it is in the accent colour and also floats above all the elements. When any interaction happens, the FAB's animation can be exaggerated to occupy the entire screen to give it more appeal.
FAB which is exaggerated on interaction.
An interaction on a payment app where the main action is exaggerated.
Follow Through and Overlapping Action
Consider a rabbit jumping from a height. When the rabbit starts its motion, its ears might start off with an Offset with its body. And when it lands, its ears would still be in motion. The former is called an 'Overlapping Action' where different parts of the character operate at different rates. The latter is called 'Follow Through' where some parts of the character would still be in motion even after the character has stopped.
In interfaces, elements can be made to overshoot (Follow through) their position before coming to rest to make them feel more natural.
A modal window exhibiting Follow Through. It overshoots its position and then settles.
When scrolled, the image cards and the texts start at different rates exhibiting an Overlapping Action.
Every interaction in an interface must be crafted carefully with the right context to make the experience immersive. Using these principles in the right places ensures that your interactions are not alien to your interface.
Many of these principles are being used in today's digital products in different forms and ways. It is great to know that a set of principles designed three decades ago holds good today.
References and further reading:
This post was originally posted on Ruthi's Medium Page.
