jQuery Plugin For Elastic / Bounce Effects - domlastic

File Size: 127 KB
Views Total: 2007
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


$ 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>
  itemsClassnameToConnect: 'item'

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


  // 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.


  callback: function(){
    // do something


5. Animate the elements manually:


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