Interpolation, easing, and smoothing

Learn how to use interpolation, easing, and smoothing in your animations.

What is interpolation?

Interpolation is the process of transitioning between two frames to create a smooth change. For example, let’s say you want to create an animation that grows and fades out an image as a site visitor scrolls down the page.

The initial state of the image is the image at its normal size and opacity (i.e., not faded). The final state of the image is where the image is completely faded out and no longer appears on the page.

When you animate this change, you don’t want to create an abrupt cut between the initial and final states of the image — you want the image to gradually grow and fade. Interpolation manages those states between the initial and final states.

Easing

Easing controls how an animation moves — whether it starts slow and speeds up, slows down at the end, or both.

You can think about easing like accelerating or braking in a car, where the speed changes gradually.

Smoothing

Smoothing (sometimes called “damping”) determines how an object’s motion transitions to its final position or state. Smoothing is helpful for animations that happen on a scroll or changing mouse position.

For example, let’s say you want to create an effect as a site visitor scrolls the page. When a site visitor changes their scroll position abruptly, or if they’re using a scroll wheel that jumps quickly, the animation isn’t necessarily visually obvious, because the position change and the animation are occurring simultaneously.

Smoothing animates smoothly as the site visitor approaches the scroll position and takes previous scroll positions into account as the animation happens.

A higher smoothing value increases the damping effect. Lower smoothing values (or 0% smoothing) mean animations react to triggers in real time.