Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
animation

What is the steps easing in Anime.js?

Rana Abdul Muneem

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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.

anime({
   ...
   easing: 'steps(x)',
   ...
});

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:

Using the steps easing

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:

Modify the animation to make it look like its starting from 0 with five steps

Explanation

We change two lines of code in the JavaScript section.

  • Line 3: We modify the translateX property. 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.

RELATED TAGS

javascript
animation

CONTRIBUTOR

Rana Abdul Muneem
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring