The easing property in Anime.js controls the rate of change in animation progress.
The elastic easing makes the animation mimic the motion of stretching a rubber band and releasing it.
There are four types of elastic easings in anime.js. These are as follows:
easeInElasticeaseOutElasticeaseInOutElasticeaseOutInElasticThe syntax of these easings is as follows:
anime({
...,
easing: 'easeInElastic(amplitude, period)',
});
anime({
...,
easing: 'easeOutElastic(amplitude, period)',
});
anime({
...,
easing: 'easeInOutElastic(amplitude, period)',
});
anime({
...,
easing: 'easeOutInElastic(amplitude, period)',
});
Each easing takes two optional parameters, amplitude and period.
amplitude: This controls how much the animation overshoots. The larger the value, the more the overshoot.period: This determines the number of times the animation moves back and forth. The lower the value, the more the back and forth.The table below summarizes valid values for these parameters:
Parameter | Valid values | Default value |
amplitude | 1–10 | 1 |
period | 0.1–2 | 0.5 |
We will discuss these parameters in greater detail. First, let's explore the effect of the four prefixes: easeIn, easeOut, easeInOut, and easeOutIn.
easeInElastic easingThe easeIn prefix signifies that the back and forth occurs at the start of the animation. The animation progress follows the curve below:
easeOutElastic easingIn this easing, the back and forth occurs at the end of the animation. The progress curve is given below:
easeInOutElastic easingThis easing applies the easeIn effect first and then the easeOut effect. In other words, the back and forth occurs both at the animation's start and end.
The following is the progress curve:
easeOutInElastic easingHere, the easeOut effect is applied before the easeIn effect. The animation "eases out" to the midpoint and then "eases in" to the finish point.
The animation progression follows the given curve:
With a better understanding of the easing curves, let's look at the effect of the amplitude and period parameters.
amplitude parameterThis parameter determines how greatly the animation overshoots. In simple terms, it determines how high the "hills" are and how low the "trenches" are in the curve. The greater the amplitude, the higher the "hills" and the lower the "trenches."
The animation below describes how changing the amplitude affects the progress curve:
period parameterThis parameter determines the number of back and forth motions. The lower the period, the more the back and forth. At a value of
The effect on the progress curve is described below:
The example below shows the use of the elastic easing. We recommend playing around with the prefixes and parameter values to get an idea of the effects.
In the HTML section, we style a div element to look like a blue box using the box class. In the JavaScript section, we create the animation using the anime() function.
box1.translateY property to a pair of two values, 200 and 0. As a result, the box moves vertically from 200px to 0px.delay of 1000 ms, a duration of 2000 ms. There will be another delay at the end (endDelay) of 1000 ms.easeInElastic easing. We set the amplitude to 1 and the period to 0.2.loop parameter to true. This makes the animation repeat indefinitely.Free Resources