12 Principles of Animation: A Guide to Motion Design

Easing

Nothing in the world around us moves at a consistent speed. For example, when an apple falls from a tree, its speed increases with time because of how gravity works. To create such natural animations, designers use easing — an acceleration or deceleration. You can make an element move slowly at the start and then speed it up or vice versa. Easing makes moving objects look less artificial and robotic.

Offset & overlapping action

The principle of offset and delay defines the relationship between elements and hierarchy. In the correct example, we can see that the elements appear one by one, which creates the impression that these elements are part of a whole.

Designers can use offset and delay to define elements' roles and importance. For example, if you're animating a card appearing on screen, set the animation to show the heading and image first, and the button on delay. It will draw users' attention to the last element to appear, the interactive button.

Parenting

Together with offset and delay, parenting helps define relationships between elements. Parenting links one object's properties to another object, establishing a direct connection. In the example, the child element's size and position depend on the parent's position.

As users interact with a parent element, their child elements should move accordingly. For example, when users swipe through an image carousel, images should move along with the slider and scroll.

Transformation

Have you ever watched mesmerizing time-lapses of caterpillars transforming into beautiful butterflies? A similar type of transformation exists in animation. In fact, it's one of the fundamental principles of motion. Simply put, transformation is the process of an element morphing into another shape as it changes state.

A common example is a variation of the Submit button. You have probably seen buttons that change into progress bars as they load and end up as confirmation checkmarks. It's a great way to provide immediate system feedback to users' actions.

Value change

The change of numbers as the progress indicator loads is called a value change. The change indicates to users that something is happening behind the scenes — an important piece of feedback that lets them know their actions have had an effect.

Progress loaders aren't the only instance where value change is useful. For a real-life example, think of a slider for setting a price. As users move the thumb, the label moves with it, and the price value changes to reflect that. It helps users understand that the data is dynamic.

Loaders and transitions are examples of non-real-time interactions. Users observe the dynamic of value change, but it happens after their input.

Pro Tip! Adding value change to dashboard elements improves user experience.

Masking

Masking is the process of revealing or hiding an object based on another shape. It establishes a relationship between an object and its utility.

Most designers are familiar with the masking tool. It's usually used for static objects like avatars, but this technique finds its application in motion too. Think of any music app — for example, Spotify. While the track is playing, its album cover and other details are hidden behind the mask so that you can browse the app. On click, the mask reveals the hidden content.

Overlay

We encounter overlays in mobile design all the time. It allows us to place one layer over another, changing the value of both. The layered design increases spatial hierarchy, communicates depth, and is more intuitive to users.

A common use case for overlays is the secondary options of Archive or Delete in apps like Gmail and Whatsapp on swipe.

Cloning

We're sure you know what cloning is in biology. Cloning in UI is similar — it's the natural creation of new objects from existing ones.

Designers actively use cloning to save up some space. For example, the Google calendar app contains a FAB button in the right bottom corner. When users click it, the button expands and produces several actions, like creating an event, task, goal, or reminder.

Secondary action & obscuration

Obscuration is the process of partially hiding a layer to focus attention on another one. Obscuration is similar to overlay as it involves temporarily hiding the . Some common techniques to achieve obscuration include blurring and reducing opacity.

Designers often use obscuration in confirmation dialogs, navigation menus, or folder/file windows.

Parallax

Parallax is a motion principle that describes UI objects moving at different speeds. This effect helps designers provide the illusion of depth.

As users scroll, slower-moving elements appear further away. Humans perceive farther objects as less relevant, so you can set secondary elements like the background to move slower. Faster moving elements grab our attention and seem important. That's why designers set elements with a higher priority, like text, images, and buttons, to move faster.

Dimensionality & principles of animation

Dimensionality is another way to animate how elements appear and disappear by creating an illusion of depth. It makes UI elements have multiple interactive sides, just like objects in the physical world. Users can fold, flip, drag, or do whatever they can with such elements. Dimensionality also makes for seamless screen transitions.

Dolly & zoom

The principle of dolly & zoom comes from cinematography, where this effect is used to create unusual visual perception. It's achieved by doing 2 things at the same time:

• Dollying or changing the distance between the camera and subject. Think of a photographer approaching an element to take a more detailed shot.
• Zooming or scaling an image artificially. Think of a photographer using the camera's zoom feature to enlarge certain elements.

Designers often use this principle to create a close-up on an image or change the perspective and show the image from another angle.