jQuery Plugin For Sequential Entrance Animations - chain-fade

chain-fade is a super easy jQuery plugin that allows a series of arbitrary DOM elements to be displayed sequentially, with a configurable fade in animation effect. You can use this plugin to trigger an entrance animation for instance.

How to use it:

1. Add the jQuery chain-fade plugin's script after jQuery library as this:

<!-- jQuery -->
<script src="//code.jquery.com/jquery.min.js"></script>
<!-- Chain Fade -->
<script src="js/chain_fade.js"></script>

2. Call the function on the target content sections where you want to apply the entrance animation.

$('section').chainFade();

3. To customize the entrance animation, just by passing the following options as an object to the instance.

$('section').chainFade({

  // Time in miliseconds before the animation starts
  startAt: 0,

  // Time in miliseconds between each animation
  interval: 300,

  // Speed of the animation in miliseconds
  speed: 700,

  // The type of animation. For the moment is just 'fade' :3
  fx: 'fade',

  // Initial distance of each elements
  distance: 50,

  // Direction of the animation: 'forward' or 'backward'
  direction: 'forward',

  // Where the element should go: toThe 'left', 'right', 'bottom' or 'top'
  toThe: 'top',

  // To apply the same height based on the taller element
  fixedHeight: false,

  // If you want to see the selected options in the console
  messages: false,

  // Change to false if you want to animate all the elements at once if you don't have a container for those elements
  queue: true,

  // Easing, MUST INCLUDE JQUERY UI FOR ANOTHER!!!
  ease: 'swing',

  // Callback function
  after: function(){}
  
});

---

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