Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

animation
javascript

What is the elastic 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.

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:

anime({
    ...,
    easing: 'easeInElastic(amplitude, period)',
});
anime({
    ...,
    easing: 'easeOutElastic(amplitude, period)',
});
anime({
    ...,
    easing: 'easeInOutElastic(amplitude, period)',
});
anime({
    ...,
    easing: 'easeOutInElastic(amplitude, period)',
});

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:

Parameter Values

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.

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:

Animation progress vs. time curve followed by the easeInElastic easing

The easeOutElastic easing

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

Animation progress vs. time curve followed by the easeOutElastic easing

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:

Animation progress vs. time curve followed by the easeInOutElastic easing

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:

Animation progress vs. time curve followed by the easeInOutElastic easing

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 effect of amplitude on the progress vs. time 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.10.1, there is maximum back and forth. At a value of 22, there is none.

The effect on the progress curve is described below:

The effect of period on the progress vs. time curve

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.

RELATED TAGS

animation
javascript

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