1. Make sure a link to the Jquery library is included on your site or page (our theme already includes this) BEFORE any JQuery code.

2. If you want to put the jQuery code into an html page, wrap the code below in script tags and INSERT 
IN THE BOTTOM OF THE PAGE (inserting at the bottom guarantees the code works in all situations).  If 
putting into an external .js file, that file MUST BE CALLED NEAR THE BOTTOM OF THE PAGE (in order for 
the jQuery code to work in all situations), then call that file.  (Our theme already calls it's scripts.js 
file in the footer.) 

3. DO NOT WRAP THE CODE into a new or pre-existing document ready function.  It does not work consistently 
in all situations if you do so.
 
Note that animations on scroll jQuery adds the class "go" (i.e. fires the animation) to the element you wish to animate (which also alsways has the class "animate" AND the class of the animation you wish to use.


/*animate on scroll code begins*/



(function($) {
  var selectors = [];
  var check_binded = false;
  var check_lock = false;
  var defaults = {
    interval: 250,
    force_process: false
  }
  var $window = jQuery(window);
  var $prior_appeared;
  function process() {
        check_lock = false;
    for (var index = 0; index < selectors.length; index++) {
      var $appeared = jQuery(selectors[index]).filter(function() {
        return jQuery(this).is(':appeared');
      });
      $appeared.trigger('appear', [$appeared]);
      if ($prior_appeared) {
        var $disappeared = $prior_appeared.not($appeared);
        $disappeared.trigger('disappear', [$disappeared]);
      }
      $prior_appeared = $appeared;
    }
  }
  jQuery.expr[':']['appeared'] = function(element) {
    var $element = jQuery(element);
    if (!$element.is(':visible')) {
      return false;
    }
    var window_left = $window.scrollLeft();
    var window_top = $window.scrollTop();
    var offset = $element.offset();
    var left = offset.left;
    var top = offset.top;
    if (top + $element.height() >= window_top &&
        top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
        left + $element.width() >= window_left &&
        left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
      return true;
    } else {
      return false;
    }
  }
  jQuery.fn.extend({
    appear: function(options) {
      var opts = $.extend({}, defaults, options || {});
      var selector = this.selector || this;
      if (!check_binded) {
        var on_check = function() {
          if (check_lock) {
            return;
          }
          check_lock = true;
          setTimeout(process, opts.interval);
        };
        jQuery(window).scroll(on_check).resize(on_check);
        check_binded = true;
      }
      if (opts.force_process) {
        setTimeout(process, opts.interval);
      }
      selectors.push(selector);
      return $(selector);
    }
  });
  jQuery.extend({
     force_appear: function() {
      if (check_binded) {
        process();
        return true;
      };
      return false;
    }
  });
})(jQuery);
(function($){
  '$:nomunge'; 
   var cache = {},
      doTimeout = 'doTimeout',
      aps = Array.prototype.slice;
    jQuery[doTimeout] = function() {
    return p_doTimeout.apply( window, [ 0 ].concat( aps.call( arguments ) ) );
  };
  jQuery.fn[doTimeout] = function() {
    var args = aps.call( arguments ),
      result = p_doTimeout.apply( this, [ doTimeout + args[0] ].concat( args ) );
     return typeof args[0] === 'number' || typeof args[1] === 'number'
      ? this
      : result;
  };
  function p_doTimeout( jquery_data_key ) {
    var that = this,
      elem,
      data = {},
      method_base = jquery_data_key ? $.fn : $,
      args = arguments,
      slice_args = 4,
      id        = args[1],
      delay     = args[2],
      callback  = args[3];
    if ( typeof id !== 'string' ) {
      slice_args--;
      id        = jquery_data_key = 0;
      delay     = args[1];
      callback  = args[2];
    }
    if ( jquery_data_key ) { 
      elem = that.eq(0);
      elem.data( jquery_data_key, data = elem.data( jquery_data_key ) || {} );
      } else if ( id ) {
      data = cache[ id ] || ( cache[ id ] = {} );
    }
  data.id && clearTimeout( data.id );
    delete data.id;
    function cleanup() {
      if ( jquery_data_key ) {
        elem.removeData( jquery_data_key );
      } else if ( id ) {
        delete cache[ id ];
      }
    };
  function actually_setTimeout() {
      data.id = setTimeout( function(){ data.fn(); }, delay );
    };
     if ( callback ) {
        data.fn = function( no_polling_loop ) {
        if ( typeof callback === 'string' ) {
          callback = method_base[ callback ];
        }
        callback.apply( that, aps.call( args, slice_args ) ) === true && !no_polling_loop
           ? actually_setTimeout()
           : cleanup();
      };
     actually_setTimeout();
     } else if ( data.fn ) {
      delay === undefined ? cleanup() : data.fn( delay === false );
      return true;
    } else {
      cleanup();
    }
    };
  })(jQuery);
jQuery('.animatedParent').appear();
jQuery('.animatedClick').click(function(){
  var target = jQuery(this).attr('data-target');
  if(jQuery(this).attr('data-sequence') != undefined){
    var firstId = jQuery("."+target+":first").attr('data-id');
    var lastId = jQuery("."+target+":last").attr('data-id');
    var number = firstId;
    if(jQuery("."+target+"[data-id="+ number +"]").hasClass('go')){
      jQuery("."+target+"[data-id="+ number +"]").addClass('goAway');
      jQuery("."+target+"[data-id="+ number +"]").removeClass('go');
    }else{
      jQuery("."+target+"[data-id="+ number +"]").addClass('go');
      jQuery("."+target+"[data-id="+ number +"]").removeClass('goAway');
    }
    number ++;
    delay = Number(jQuery(this).attr('data-sequence'));
    jQuery.doTimeout(delay, function(){
      console.log(lastId);
      if(jQuery("."+target+"[data-id="+ number +"]").hasClass('go')){
        jQuery("."+target+"[data-id="+ number +"]").addClass('goAway');
        jQuery("."+target+"[data-id="+ number +"]").removeClass('go');
      }else{
        jQuery("."+target+"[data-id="+ number +"]").addClass('go');
        jQuery("."+target+"[data-id="+ number +"]").removeClass('goAway');
      }
      ++number;
      if(number <= lastId){return true;}
    });
  }else{
    if(jQuery('.'+target).hasClass('go')){
      jQuery('.'+target).addClass('goAway');
      jQuery('.'+target).removeClass('go');
    }else{
      jQuery('.'+target).addClass('go');
      jQuery('.'+target).removeClass('goAway');
    }
  } 
});
jQuery(document.body).on('appear', '.animatedParent', function(e, $affected){
  var ele = jQuery(this).find('.animated');
  var parent = jQuery(this);
  if(parent.attr('data-sequence') != undefined){
    var firstId = jQuery(this).find('.animated:first').attr('data-id');
    var number = firstId;
    var lastId = jQuery(this).find('.animated:last').attr('data-id');
    jQuery(parent).find(".animated[data-id="+ number +"]").addClass('go');
    number ++;
    delay = Number(parent.attr('data-sequence'));
    jQuery.doTimeout(delay, function(){
      jQuery(parent).find(".animated[data-id="+ number +"]").addClass('go');
      ++number;
      if(number <= lastId){return true;}
    });
  }else{
    ele.addClass('go');
  }
 });
 jQuery(document.body).on('disappear', '.animatedParent', function(e, $affected) {
  if(!jQuery(this).hasClass('animateOnce')){
    jQuery(this).find('.animated').removeClass('go');
   }
 });
 jQuery(window).on('load',function(){
  jQuery.force_appear();
 });

/*animate on scroll code ends*/