Fading element in the center of window by scrolling

I use a script in which elements fade in from the left and right as soon as the respective element has been scrolled completely into view. The problem is, the fade-in remains until the element has completely disappeared from the field of view. I try to implement it in such a way that it fades out as soon as it is no longer completely in sight. Otherwise, all elements are shown at the same time when scrolling.

function Utils() {}
Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();
$(window).on('load', addFadeIn());

$(window).scroll(function() {
    addFadeIn(true);
});

function addFadeIn(repeat) {
    var classToFadeIn = ".will-fadeIn";
    
    $(classToFadeIn).each(function( index ) {
        var isElementInView = Utils.isElementInView($(this), false);
        if (isElementInView) {
            if(!($(this).hasClass('fadeInRight')) && !($(this).hasClass('fadeInLeft'))) {
                if(index % 2 == 0) $(this).addClass('fadeInRight');
                else $(this).addClass('fadeInLeft');
            }
        } else if(repeat) {
            $(this).removeClass('fadeInRight');
            $(this).removeClass('fadeInLeft');
        }
    });
}

The HTML:

<section id="locations-mobile">
  <div id="loc1">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/1#">#</a></p>
        <p><a href="#" target="_blank">
          <i class="fas fa-map-marker-alt"></i>#<br />
          #</a></p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
  <div id="loc2">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/2#">#</a></p>
        <p><a href="#" target="_blank">
          <i class="fas fa-map-marker-alt"></i>#<br />
          #</a></p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
  <div id="loc3">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/3#">#</a></p>
        <p><a href="#" target="_blank">
          <i class="fas fa-map-marker-alt"></i>#<br />
          #</a></p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
  <div id="loc4">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/4#">#</a></p>
        <p><a href="#" target="_blank">
          <i class="fas fa-map-marker-alt"></i>#<br />
          #</a></p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
</section>

from Fading element in the center of window by scrolling