12 Principles of Motion Design

Learn how to create visually engaging and seamless motion designs that bring your digital projects to life
12 Principles of Motion Design Lesson

Motion is a powerful tool that can be used to apply key UX design principles, such as desirability and usability, to product designs. For centuries, people have instinctively paid attention to moving objects, and in the modern world, designers use animation to capture users' attention with movement.

Animation in apps can serve different functions, such as enhancing your brand identity with your own animation style. More importantly, motion and animation can function as a form of subtle feedback for microinteractions, such as a navigation menu that slides over when a hamburger icon is tapped.[1]

However, creating beautiful and natural animations is not easy. In 1981, animators Ollie Johnston and Frank Thomas released a book called "The Illusion of Life: Disney Animation," where they introduced Disney's 12 principles of animation. These principles have stood the test of time and are still relevant for UI animation.[2] By applying these principles in design, you can use motion to create a more desirable and usable product.[3]

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.

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.

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.

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.

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 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.

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.

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.

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 content. 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 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 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.

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.

Complete the lesson quiz and track your learning progress.
Start
<?xml version="1.0" encoding="utf-8"?>