Объедините два скрипта jQuery в одну функцию

Question

У меня есть два скрипта с функцией прокрутки.Первый предназначен для анимации, такой как fadeIn, fadeOut, ... с использованием animate.css, а второй - для счетчиков.Я хотел бы объединить эти два скрипта в один, используя элементы данных.Таким образом, каждый элемент будет иметь класс «animate», но в зависимости от элемента данных он будет запускать базовую функцию анимации или функцию анимации счетчика.

function loadAnimations(items) {

  var offset = $(window).scrollTop() + $(window).height();

  if (items.length == 0) {
    $(window).off('scroll', loadAnimations);
  }

  items.each(function(i) {
    var element = $(this),
      animationClass = element.attr("data-animation"),
      animationDelay = element.attr('data-animation-delay');

    element.css({
      '-webkit-animation-delay': animationDelay,
      '-moz-animation-delay': animationDelay,
      'animation-delay': animationDelay
    });

    if ((element.offset().top + element.height() - 20) < offset) {
      element.addClass('animated').addClass(animationClass);

    }

  });

}

/*
SCROLL FUNCTIONS
********************************/

// Every time the window is scrolled... 
$(window).scroll(function() {

  loadAnimations($('.animate'));

  // Check the location of each desired element
  $('.count').each(function(i) {

    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    // If the object is completely visible in the window, fade it it
    if (bottom_of_window > bottom_of_object) {

      var $this = $(this);
      $({
        Counter: 0
      }).animate({
        Counter: $this.attr('data-to')
      }, {
        duration: 2000,
        easing: 'swing',
        step: function() {
          $this.text(Math.ceil(this.Counter));
        },
        complete: function() {
          $this.text(Math.ceil(this.Counter));
        }
      });

      $(this).removeClass('count').addClass('counted');

    }

  });

}).trigger('scroll');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card tab-item animate" data-animation="fadeInUp" data-link="terms">
  <div class="more-corner" href="#">+</div>
  <div class="card-body">
    <h4 class="card-title mb-1 text-4 font-weight-bold">Inbound and Outbound</h4>
    <p class="card-text">We identify bills according to inbound or outbound shipments and verify incoterms before an invoice becomes payable.</p>
  </div>
</div>



<div class="full-width-text-box-in">
  <h2 class="mb-3 count" data-to="140">0</h2>
  <h3 class="mb-2">Different carriers</h3>
  <div>Bring to the table win-win survival strategies to ensure proactive domination for world peace.</div>
</div>

Таким образом, класс "count" будет заменен на animate, и я буду использовать только функцию loadAnimations () и удалить .count.each (function ()).

Не знаю, ясно ли я:)

Но все равно спасибо за вашу помощь.