jounce

1.0.0 • Public • Published

jounce

Bounce HTML elements using JavaScript

How to use

  • 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();

Package Sidebar

Install

npm i jounce

Weekly Downloads

0

Version

1.0.0

License

ISC

Unpacked Size

3.87 kB

Total Files

3

Last publish

Collaborators

  • amitkhonde