What is easing in Anime.js?

What is easing?

An easing is a mathematical function that describes the rate of change of a value over time. In the context of animations, easing determines how the animation will progress from its start point to its finish point.

For example, the animation of a moving car. It is unrealistic for the car to move from start to finish at a constant speed. A more realistic animation would be if the car initially sped up, then moved at a constant speed, then slowed down before reaching its endpoint.

Syntax

In Anime.js, easing is a property parameter that can take several values. The following code describes how to add the easing parameter to an animation:

Anime.js provides a large number of easing values to choose from.

Linear

The 'linear' easing ensures a constant change from start to finish. It is useful for animations that involve a shift in color or opacity.

Code explanation

We create a div element in the HTML portion and style it to look like a box using the box class.

In the JavaScript section of the code, we create an animation using the anime() function:

• Lines 1–5: We create an animation that targets elements with the box class. We set the backgroundColor to a shade of red and specify the duration and delay parameters to 1000 milliseconds.
• Line 7: We set the easing parameter to 'linear'. It ensures that the color changes in a uniform manner.

Penner's functions

Anime.js also provides 36 easing values based on the easing functions created by Robert Penner. A list of these easings can be found here.

To explain how these easings work, we take the quad seriesEasings based on a quadratic curve of easings as an example. These easing values end with quad. We have omitted the other properties from the code for clarity.

Each easing value is explained below:

• easeInQuad: Start the animation slow, then speed up according to a quadratic curve.
• easeOutQuad: Start the animation normally, but slow down when nearing the endpoint according to a quadratic curve.
• easeInOutQuad: Start the animation slow, then speed up to the halfway point and slow down until the endpoint. Again, according to a quadratic curve.
• easeOutInQuad: Start the animation normally, but slow down near the midpoint. Then, resume slowly and speed up to the endpoint. Again, according to a quadratic curve.

The graphs below summarize the above explanations for each easing:

In this explanation, we have considered Quad easings. The same principles apply to other easings such as easeInCubic, easeOutCubic, and so on. The only difference is that a cubic or some other function determines the rate of speeding up and slowing down.

Other easings

Additionally, anime.js also provides the following four easings, each utilizing its own set of unique parameters.

• cubicBezier: Animation progress will follow a user-defined cubic Bézier curve.
• spring: Animation progress will mimic a spring.
• elastic: It will be similar to the spring easing but with finer control of start and endpoints.
• steps: Progress jumps between uniformly spaced points of time. The user defines the number of points or steps.

Custom easings

If none of the abovementioned easings suit our needs, we can define our own using function-basedSetting the value of a property to a function instead of a string or number values.

Note: To learn how to create your own easings, click here.