What is the elastic easing in Anime.js?

What is the easing property?

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.

Syntax

There are four types of elastic easings in anime.js. These are as follows:

• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeOutInElastic

The syntax of these easings is as follows:

Parameters

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:

We will discuss these parameters in greater detail. First, let's explore the effect of the four prefixes: easeIn, easeOut, easeInOut, and easeOutIn.

The easeInElastic easing

The easeIn prefix signifies that the back and forth occurs at the start of the animation. The animation progress follows the curve below:

The easeOutElastic easing

In this easing, the back and forth occurs at the end of the animation. The progress curve is given below:

The easeInOutElastic easing

This 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:

The easeOutInElastic easing

Here, 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.

The amplitude parameter

This 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:

The period parameter

This parameter determines the number of back and forth motions. The lower the period, the more the back and forth. At a value of $0.1$, there is maximum back and forth. At a value of $2$, there is none.

The effect on the progress curve is described below:

Example

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.

Explanation

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.

• Line 2: We target the div element using its ID, box1.
• Line 3: We set the translateY property to a pair of two values, 200 and 0. As a result, the box moves vertically from 200px to 0px.
• Lines 3–6: We define some animation parameters. The box will be translated vertically upwards. The animation will have a delay of 1000 ms, a duration of 2000 ms. There will be another delay at the end (endDelay) of 1000 ms.
• Line 7: We apply the easeInElastic easing. We set the amplitude to 1 and the period to 0.2.
• Line 8: We set the loop parameter to true. This makes the animation repeat indefinitely.