jQuery Plugin For Elastic / Bounce Effects - domlastic

domlastic is a jQuery plugin which applies a fancy, configurable Elastic / Bounce animation effect on a group of elements using several CSS3 animation properties.

Installation:

# NPM
$ npm install domlastic --save

# Bower
$ bower install domlastic --save

How to use it:

1. Insert the jQuery domlastic plugin's script after the latest version of jQuery library is loaded in the document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/domlastic.js"></script>

2. Initialize the domlastic plugin and specify the elements to animate.

<div class="listToAnimate">
  <div class="item">FloralWhite</div>
  <div class="item">Khaki</div>
  <div class="item">SandyBrown</div>
  <div class="item">Gainsboro</div>
  <div class="item">MediumSeaGreen</div>
  <div class="item">MediumSeaGreen</div>
  <div class="item">Teal</div>
  <div class="item">YellowGreen</div>
  <div class="item">Sienna</div>
  ...
</div>

domLastic.init({
  itemsClassnameToConnect: 'item'
}); 

3. Config the Elastic / Bounce animation effect with the following options.

domLastic.init({

  // CSS Selector for items to join
  itemsClassnameToConnect: '',

  // between 10 - 100
  itemsJointStrength: 10, 

  // animation speed
  animationSpeed: 500,

  // 0.5 - 1
  animationIntensity: 0.6,

  // or 'horizontal'
  animationDirection: 'vertical'
  
}); 

4. Execute a function when the animation is completely finished.

domLastic.init({

  callback: function(){
    // do something
  }

}); 

5. Animate the elements manually:

domLastic.animateItems();

---

This awesome jQuery plugin is developed by ymc-thzi. For more Advanced Usages, please check the demo page or visit the official website.