Estimation, alleviation, and polishing

Estimation

When endeavoring to animate the shift from Point A to Point B, direct transitions are insufficient. Visually, we seek to include extra frames in between to ensure the movement is refined.

The process of generating these intermediary frames is known as estimation. On the animation timeline displayed here, we merely establish the initial and final points. The in-between frames are then estimated for us—automatically.

Alleviation

As demonstrated in the illustration below, linear motion follows a direct route from Point A to Point B.

However, in practical scenarios, when accelerating by pressing the gas pedal, the vehicle does not immediately reach 50 kph. It needs to accelerate gradually to reach that speed. Also, when coming to a halt, it does not abruptly stop; rather, it decelerates. This results in a much smoother experience for the passengers.

Here is the same animation with easing applied:

To incorporate easing to an action, simply pick the easing style from the dropdown menu after selecting the action.

Polishing

Lastly, let’s delve into polishing (sometimes termed damping). This is particularly beneficial for animations triggered by scrolling or changes in mouse position.

In the scenario presented above, we aim to produce a parallax depth effect while scrolling. Unfortunately, abrupt changes in scroll position or rapid scrolling via a scroll wheel can make the animation less perceptible. This is because the position (and the animation) changes precisely with the movement.

Enter: polishing. Within any continuous trigger, we can refine the animation as it nears the actual scroll position (as it catches up). The image below demonstrates how it operates as a hysteresis (or lag) by considering our earlier scroll positions.

A higher polishing parameter enhances the damping effect. Lower values for polishing (even 0% polishing) signify that all animations and responses are in real-time. Here, the polishing is set to 100%:

Polishing does not override any inner easing configurations made within an animation. It simply refines and smoothens the velocity approaching the correct position on the animation timeline.