Bounce HTML elements using JavaScript

• Install jounce npm install --save-dev jounce
• Add three HTML elemnets to your markup
  • jounceContainer // Area for element to bounce.
  • jounceMainDiv // Element used for applying animaion.
  • jounceSubDiv // Content inside this element will be bounced.

  <div id="container" class="container">
      <div id="mainDiv" class="main-div">
          <div id="subDiv" class="sub-div">
              <!-- content you want to bounce -->
          </div>
      </div>
  </div>
  

• Add styles

.container {
    position: relative;
}
.main-div {
    position: absolute;
}

.sub-div {
    position: absolute;
}

• Import and initialize jounce

 import * as jounce from 'jounce';

 options = {
   noOfBounces: 3; // number of bounces for element default 2.
   time: 2; // duration of the animation. default 3.
 }
 jounce.init({ options })

• Bounce the element

jounce.animate();