Interpolation, easing, and smoothing

 

Interpolation

When we’re trying to animate a movement Point A and Point B, we can't just cut. Visually, we're looking for additional frames in between so the motion is smoothed out.

 

The process of creating those in-between frames is called interpolation. On the animation timeline here, we’re only setting the starting point and the ending point. Everything in between is interpolated for us—automatically.

Easing

As we can see in the example below, linear motion takes a direct path from Point A to Point B.

 

But in real life, when you press on the acceleration pedal, the car isn't instantly traveling at 50 kph. It has to accelerate to get there. And when it stops, it doesn't abruptly stop. It slows down. Much more comfortable for the passengers.

When we add easing to this animation, we’re affecting distance and time, and changing what would be graphed as linear and making it an s-curve, as pictured above

Here’s that same animation with easing applied:

 

To add easing to an action, simply select the action and choose the easing type from the dropdown.

There are several easing options accessible from in the Interactions panel in animation mode

Smoothing

Finally, let’s cover smoothing (sometimes called damping). This is really helpful for animations that occur on a scroll or on a changing mouse position.

 

In the example above, we’re trying to create a parallax depth effect as we scroll. Unfortunately, when we change our scroll position abruptly, or if we’re using a scroll wheel that jumps quickly, the animation isn’t necessarily obvious. That’s because the position (and the animation) is occurring at exactly the same time.

Enter: smoothing. In any continuous trigger, we can smooth out the animation as it approaches the actual scroll position (as it catches up). And we can see below that it functions as a hysteresis (or lag) which takes into account our previous scroll positions.

 

A higher smoothing number increases the damping effect. Lower smoothing numbers (or even 0% smoothing) means everything is animating and reacting in real-time. Below, we've set the smoothing to 100%:

 
Smoothing doesn’t override any easing settings we’ve created inside an animation. Smoothing only softens and smooths out the approaching velocity towards the correct position on the animation timeline.