What is the spring easing in Anime.js?

What is an easing?

Easings are mathematical functions that determine the rate of change in animation progression.

Anime.js provides several easing values. One such easing is the spring easing. This causes our animation's progress to mimic a bouncing spring.

A typical spring system involves the spring and a mass. Once we release the mass, it falls and oscillates until it comes to rest at its final position, also known as its equilibrium position.

Syntax

The syntax for applying the spring easing is as follows:

The spring easing takes four parameters.

• mass: This is the mass attached to the spring. The greater the mass, the larger the displacement from the equilibrium position and the longer the duration of the oscillations.
• stiffness: This is the strength of the spring or the effort needed to stretch it. In this case, the lower the value, the stronger the spring.
• damping: This is the degree of reduction in displacement between each oscillation. Higher damping leads to fewer oscillations and lower duration.
• velocity: This is the starting speed with which the mass is let go. Greater velocity leads to greater displacement from the equilibrium position.

The table below summarizes the valid values for these parameters:

Example

Here is an example of a simple sliding box. For a better understanding, we have highlighted the equilibrium position of the box in green:

Explanation

In the HTML section, we create the box using a div element and style it with the box class.

In the JavaScript section, we create the animation using the anime() function.

• Line 2: We target the div element using its box class.
• Line 3–5: We set parameters to control the box's horizontal movement and timing.
• Line 5: We set the easing parameter to spring. We pass a mass of 5, a stiffness of 100, a damping of 10, and a velocity of 1.

As we can see, the motion of the box mimics the motion of a released spring. We recommend playing with the parameter values to get a better understanding of the spring easing.