add animation manually using jquey

============================= JS ===============================

$(window).on("load resize scroll",function(){
  if ( $('.wow').length > 0 ){
    $('.wow').each(function(){
      var itemPos = $(this).offset().top;
      var windowHeight = $(window).outerHeight();
      var scrollTop = $(window).scrollTop();
      var result = scrollTop + windowHeight ;
      if ( result > itemPos ){
        $(this).addClass('active');
      }
    });

  }
});


============================= CSS ===============================

/*===== default animation =====*/
.wow {
    opacity: 0;
}
.wow.active {
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 1;
    transition-delay: .2s;
}


/*===== delay animation =====*/

.wow.delay2s {
transition-delay: .2s;
}
.wow.delay4s {
transition-delay: .4s;
}
.wow.delay6s {
transition-delay: .6s;
}
.wow.delay8s {
transition-delay: .8s;
}
.wow.delay10s {
transition-delay: .10s;
}

/*===== effect animation =====*/

.wow.fadeInUp {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}
.wow.fadeInUp.active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.wow.fadeInDown {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}
.wow.fadeInDown.active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.wow.fadeInRight {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
}
.wow.fadeInRight.active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.wow.fadeInLeft {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}
.wow.fadeInLeft.active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}