What is the steps easing in Anime.js?

Easing in Anime.js

The easing parameter in Anime.js controls the rate of change in animation progress.

The steps easing divides the animation progress into several points. The animation will then jump between these points.

Syntax

The steps value for the easing parameter takes a single integer parameter—the step count.

Here, x is the number of steps we want the animation to take. The value of x can be any integer between 1 and $\infty$. By default, the value is 10.

Example

In the following example, we demonstrate the effect of the steps easing on a sliding box:

Explanation

In the HTML section, we style a <div> tag to look like a blue box using the box class. In the JavaScript section, we create the animation.

• Lines 1–7: We create an animation using the anime() function.

  • Line 2: We target the div element we previously created.

  • Lines 3–5: We define a simple horizontal movement to 500px. We set the duration and delay to 2000 and 1000 milliseconds, respectively.

  • Line 6: We set the easing parameter to 'steps(5)'. This causes the animation to progress in five jumps.

We can see that even though the step count is 5, there are only four noticeable jumps. Furthermore, the box does not start from the left border. This is because the progress starts after the first jump.

The illustration below describes the phenomenon:

The box has already taken the first step before the animation begins. Therefore, the box appears 100px to the right, and the animation only shows the four remaining jumps.

Modify the animation

A simple fix is to set an earlier start point and increment the step count, as shown below:

Explanation

We change two lines of code in the JavaScript section.

• Line 3: We modify the translateX . Instead of a single value, we give a pair of "from" and "to" values. The animation will start from -100px and go to 500px.

• Line 7: We change the number of steps to 6. This will result in five noticeable jumps.

The following figure illustrates the new steps:

Since we started from -100px with six steps, the animation begins visually from 0px and moves to 500px using the five remaining steps.