I'm trying to implement an animation that switches images on scroll when it's wrapping div scrolls into the viewport. My problem is that the animation starts as soon as someone starts scrolling, so the animation is already at the end when #wrapper comes into viewport.

How to achieve that the animation starts when #wrapper scrolls into the viewport?

Unfortunately my JS/jQuery knowledge is very poor but this is what I got til now:

JSFiddle

HTML:

<div class="page_content_before_image_animation">
  <p>lorem ipsum …</p>
    </div>
      <div id="load" data-images="19"></div>
        <div id="wrapper">
          <img class="sequenzbilder" src="https://twdp.de/sequence/1.jpg" width="600" height="661" />
        </div>

JS:

var images = [];
    for (i = 1; i <= $('#load').attr('data-images'); i++) {
      images.push('https://twdp.de/sequence/' + i + '.jpg');
    }
    
    $(images).each(function() {
      $('<img class="sequenzbilder" />')[0].src = this;
    });
    
    
    var totalImages = images.length;
    
    var pageHeight = $(document).height() - $(window).height();
    var scrollInterval = Math.floor(pageHeight / 140);
    
    var viewport = $(window),
      slowdown;
    viewport.on('scroll', function() {
      i = Math.floor($(this).scrollTop() / scrollInterval);
      $('.sequenzbilder').attr('src', images[i]);
      slowdown = Math.ceil(viewport.scrollTop() / 20);
    });