How to create a custom easing in anime.js
What are easings?
Easings are mathematical functions that define the rate of change in animation progress. Anime.js provides many in-built easings, but we can also define custom easings.
Syntax
Custom easings are made as a function-based value. We return another function that takes time as a parameter within the function-based value.
Note: An understanding of function-based values is necessary to understand custom easings. Function-based values and their parameters:
targets,index, andlengthare explained here.
The syntax is as follows:
anime({
...,
easing: function (target, index, length) {
return function (time) {
return ...;
};
}
});
Parameters
The time parameter represents the current time of the animation. This parameter ranges from
The value returned by the nested function is the progress of the animation ranging from
Generally, we define an easing function
In other words, at time
Example
The example below shows how to create a custom easing function. We make a 'dribbling' effect by using the trigonometric function given below:
This equation generates the following progress vs. time graph:
Code
The code below describes how to use this formula as an easing:
Explanation
In the HTML section, we create a box using a div element and a box class. In the JavaScript section, we create the animation using the anime() function.
- Line 2: We target the box using its
boxclass. - Lines 3–5: We set parameters for the animation that controls the box's horizontal movement and timing. The
tranlsateXproperty moves the box right to 500px, thedurationis set to 1000 milliseconds, and thedelaybefore the start of the animation is set to 500 milliseconds. - Lines 6–10: We set the
easingparameter to a function-based value. Inside this function-based value, we return a function that takestimeas a parameter. This nested function returns the trigonometric function that we have defined above.
