animator-pro.js

$(function() {

  function AnimatoinObject (obj, steps, duration, delay, itrations) {
    var _this = this;
    _this.obj = obj;
    _this.steps = steps;
    _this.duration = duration;
    _this.delay = delay;
    _this.itrations = itrations;

    var getStylesObject = function (fullStyle) {
      var animationData = {};
      var stepArr = fullStyle.split(';');

      for (var j=0; j<stepArr.length; j++) {
        var currentStep = stepArr[j];
        if (currentStep != "") {
          style = currentStep.split(':');
          animationData[style[0].trim()] = style[1].trim();
        }
      }
      return animationData;
    }

    var stepsAnimation = function (itrations, i) {
      if (_this.steps[i]) {
        _this.obj.animate(getStylesObject(_this.steps[i]), _this.duration, function () {
          stepsAnimation(itrations, i+1);
        });
      }
      else {
        if (itrations > 1) {
          stepsAnimation(itrations-1, 0);
        }
      }
    }

    var animateObj = function () {
      setTimeout(function() {
        stepsAnimation(_this.itrations, 0);
      }, _this.delay);
    }

    return {
      animate: function () {
        animateObj();
      },
      stop: function () {
        _this.obj.stop();
      },
      setSteps: function (steps) {
        _this.steps = steps;
      }
    }
  }

  $(document).ready(function () {

    for (var i=1; i<=4; i++) {
      $('[data-animation-pro-'+i+']').each(function(index, e) {

        var steps = []
        var trigger = $(e).attr('data-animation-pro-trigger-'+i);
        var target = $(e).attr('data-animation-pro-target-'+i);
        var duration = parseInt($(e).attr('data-animation-pro-duration-'+i)) || 500;
        var delay = parseInt($(e).attr('data-animation-pro-delay-'+i)) || 0;
        var itrations = parseInt($(e).attr('data-animation-pro-itrations-'+i)) || 1;
        steps[0] = $(e).attr('data-animation-pro-step-1-'+i);
        steps[1] = $(e).attr('data-animation-pro-step-2-'+i);
        steps[2] = $(e).attr('data-animation-pro-step-3-'+i);
        steps[3] = $(e).attr('data-animation-pro-step-4-'+i);
        steps[4] = $(e).attr('data-animation-pro-step-5-'+i);

        if (trigger == 'load') {
          if (target && target.trim()[0] == ">")
            target = $(e).find(target.trim().slice(1, target.length).trim());
          target = target || e;

          var animateObj = new AnimatoinObject($(target), steps, duration, delay, itrations);
          animateObj.animate();
        }

        if (trigger == 'click') {
          if (target && target.trim()[0] == ">")
            target = $(e).find(target.trim().slice(1, target.length).trim());
          target = target || e;

          var animateObj = new AnimatoinObject($(target), steps, duration, delay, itrations);

          $(e).click(function () {
            animateObj.stop();
            animateObj.animate();
          });
        }

        if (trigger == 'hover') {
          var hoverOutSteps = [];
          hoverOutSteps[0] = $(e).attr('data-animation-pro-hover-out-step-1-'+i);
          hoverOutSteps[1] = $(e).attr('data-animation-pro-hover-out-step-2-'+i);
          hoverOutSteps[2] = $(e).attr('data-animation-pro-hover-out-step-3-'+i);
          hoverOutSteps[3] = $(e).attr('data-animation-pro-hover-out-step-4-'+i);
          hoverOutSteps[4] = $(e).attr('data-animation-pro-hover-out-step-5-'+i);

          if (target && target.trim()[0] == ">")
            target = $(e).find(target.trim().slice(1, target.length).trim());
          target = target || e;

          var animateObj = new AnimatoinObject($(target), steps, duration, delay, itrations);

          $(e).hover(function () {
            animateObj.stop();
            animateObj.setSteps(steps);
            animateObj.animate();
          }, function () {
            animateObj.stop();
            animateObj.setSteps(hoverOutSteps);
            animateObj.animate();
          });
        }

        if (trigger == 'scroll') {
          var $el = $(e);
          if (target && target.trim()[0] == ">")
            target = $(e).find(target.trim().slice(1, target.length).trim());
          target = target || e;

          var scrollDirection = $el.attr('data-animation-pro-scroll-direction-'+i);
          var offset = $el.attr('data-animation-pro-offset-'+i);
          var animateObj = new AnimatoinObject($(target), steps, duration, delay, itrations);

          if (scrollDirection && target && offset) {
            $el.waypoint(function(direction) {
              if (direction == scrollDirection) {
                animateObj.stop();
                animateObj.animate();
              }
            }, { offset: offset});
          }
        }

      })
    }
  })
});