How to Get Started with Motion Design in 8 Minutes
Interpolation is the most important concept required to learn and excel in UI motion design.
Motion overview
Despite going through hundreds of hours of motion design material online, I have yet to see a resource that clearly teaches you the core theory behind how UI motion actually works: interpolation.
Instead of fumbling around in the dark, I decided to write a detailed post about what goes on behind the scenes on timeline-based animation programs like After Effects, Principle, Flinto, etc.
I believe there’s immense value in learning motion design for any modern-day product designer. Motion allows us to clearly communicate micro interactions, inject delight, and create subtle affordances in our design.
To understand interpolation, we need to also understand how it differs from the “traditional” style of animation: “frame by frame”. For reference, old Disney cartoons and 2D video game sprites are typically drawn frame by frame.
These animations were typically hand-drawn and then animated frame by frame — kind of like a flipbook. A senior artist would draw the most important poses called “keyframes”, while a junior artist or “inbetweener” would fill in the frames in between to create a smoother animation. As you can imagine, this was a very tedious process.
Lucky for us, with modern technological advancements, we no longer need to draw each individual frame. Could you imagine how much work it’d take? Instead, we use the interpolation technique I mentioned earlier instead.
Interpolation allows the computer to fulfill the job of the in-betweener. In other words, we interpolate the frames in between the keyframes we define.
Before we can understand interpolation, there are a couple of fundamental concepts to understand first.
Keyframes
Keyframes are used to mark what the starting and ending frames look like, and when they occur in an animated transition.
You need a minimum of two keyframes. However, in more complex animations, you can have multiple keyframes.
In the example below, we can write out the keyframes as follows:
- Keyframe 1: x position = 0, 0ms
- Keyframe 2: x position = 500, 100ms
This means if we were to animate these two keyframes, it would move the blue square from the left (x=0) to the right (x=500) over a 100ms duration.
In general, the sweet spot of a UI animation should be long enough so the user notices the transition, but not to the point where they’re waiting for the animation to end.
The rule of thumb for standard UI animations is approximately 200ms and 500ms. Animations shorter than 100ms are instantaneous and wouldn’t be registered by the user. Whereas animations longer than 1000ms (1s) would feel sluggish and convey a feeling of delay.
Properties and Values
Properties are the attributes of the UI element you want to animate. To animate a property between two keyframes, we must have different values for both of them.
In the example above, the property we want to animate is the “x-position”, and the value is 0 for keyframe 1, and 500 for keyframe 2. It’s not possible to animate a property if its values are identical between keyframes.
I listed some of the most common properties that can be animated in the list below. However, you can animate any editable property in modern UI design programs.
- Color, Opacity
- Scale
- X coordinate, Y coordinate
- Rotation
- Width, Height
So now that we understand keyframes, properties, and values, we can now define interpolation.
Interpolation is the animated change of an object’s property values between two keyframes.
That’s a bit of a mouthful so let’s break it down with the example above. To move the blue square from left to right, we are interpolating the square’s X coordinate property value from 0 (keyframe 1, 0ms) to 500 (keyframe 2, 100ms) over a 100ms duration.
When defining the animation between two keyframes, we only need to specify the property values that change.
In this example, since the x-coordinate of the position property is the only value that changes, we don’t need to specify the values for the square’s other properties since they are the same between keyframes.
Easing
If you were to animate this, you’d notice it looks dull and lifeless. That’s because we haven’t implemented any easing function!
Easing functions define the acceleration or deceleration at which a particular property value changes between keyframes.
In other words, it lets us modify the animation’s speed over the course of its duration. Note that you can apply different easing functions to each property change between keyframes.
Without an easing function, the animation would move at a consistent speed (acceleration = 0), which is typically not how objects move in real life.
Objects in real life are affected by weight, inertia, and resistance. To make our animations more realistic, we need to emulate how these factors would influence our easing function.
Easing functions can be expressed as “cubic-bezier functions” which are expressed using two sets of coordinates for the initial and ending state i.e. (x1, y1, x2, y2). The default linear motion function for a cubic bezier is (0.0, 0.0, 1.0, 1.0).
Luckily we don’t need to create easing functions from scratch. All of the modern animation software includes the preset easing functions below.
Linear
Objects that are not affected by physical forces (weight, inertia, and resistance) can be animated linearly with no acceleration.
This should rarely be used but has certain applications for object state changes (e.g. color, transparency) that do not change position or scale (i.e. no movement).
Ease-in or acceleration curve
Ease-in functions affect our property values as it moves from the initial keyframe.
This function should be used when objects move out of the frame at full speed e.g. dismissing a toast.
Think of a car driving out of the frame, it starts at 0 velocity, and gradually accelerates to peak velocity as it moves out of the frame.
Ease-out or deceleration curve
Ease-out functions affect our property values as it reaches the ending keyframe.
This function should be used when objects move into the frame at full speed e.g. clicking on the hamburger navigation icon and having the menu slide into the frame.
Think of a sled going down a hill until it reaches the bottom, it starts at peak velocity and decelerates to zero velocity as it enters into the frame.
Ease-both (ease-in-out) or standard curve
Ease-both functions affect our property values both as it moves out of the initial keyframe and as it reaches the ending keyframe.
This function should be used when objects move from one part of the frame to another, but remain in the frame throughout the duration e.g. tapping on a card that expands to fill the screen.
Think of a pendulum, it starts at peak velocity, then slowly decelerates to 0 velocity before accelerating again.
When in doubt — go with the ease-both function, it’s called the standard curve for a reason.
There are also more complex easing functions like black, elastic, bounce, etc. which are used less often. You can find a compilation of some of the other popular easing functions on easings.net.
So what do more complex animations look like? Instead of animating a single property between two keyframes, you can animate multiple properties with their individual easing curves across multiple keyframes.
It should be noted that each interpolation can start and end at various points in the duration. For example, if you’re interpolating the x-position of your UI element over 800ms, but you also want to interpolate the element’s scale, that interpolation can start and end at any point within that 800ms duration.
This means the duration of animation between two keyframes is dictated by the longest interpolation of an element’s property. Therefore, if you are animating more than one property, you can have it start and end at any point during the animation to create various effects e.g. staggering. This is called choreography and is a bit of an advanced topic so we’ll continue onwards for now.
However, I’d recommend keeping it simple as a beginner. You rarely need to animate every single property between keyframes. When you interpolate everything, it becomes very messy for the user’s eye to follow the animation.
Animation Presets
If you’ve used prototyping tools before, you probably noticed certain animation presets like “pop, slide, fade, crossfade, etc. in addition to your easing functions templates.
The animation presets above are common transitions between UI screens, but can also be interpreted using what we just learned.
Let’s take “pop” as an example. The property being interpolated is the “scale”, and the easing function is “bounce”.
Taking another example “crossfade” is just interpolating the “opacity” property with a “ease both” easing function.
See how intuitive these presets and templates are now? Experiment with the existing templates, and interpolate properties sparingly for now.
Start collecting a folder of UI motion inspiration and attempt to recreate them by tweaking existing animation presets. Over time you’ll develop a mental model of which animation properties and values are used to create various effects.
The world of UI motion is vast and exciting. I’m always blown away by the sheer creativity of our design community whenever I see new and novel applications of these basic principles.
Additional resources
- Understanding Linear Interpolation in UI animation
- CSS Easing Functions
- The Art and Science of Designing with Motion
- Material Design Motion Guidelines
- The Ultimate Guide to Proper Use of Animation in UX
- Compilation of Popular Easing Curves on Easings.net
Ready to level up your design skills and reach your full potential? Subscribe to The Ambitious Designer newsletter for weekly doses of UX insights, frameworks, and practical career advice.
