Javascript animate when visible in viewport

Question

I have the following HTML structure and the according JavaScript. I want to animate the .half-width-text, .list-div and .list-div2.
Therefore, I wrote the JavaScript. I used the container as element for the for each and then look for all childs that match the class hierarchy I want to animate. However, with this, all animations are toggled when the page is loaded and not if the element gets visible in the viewport as expected.
Can someone help me?
Update:
https://codepen.io/anon/pen/MqMeKE

(function($) {
  $.fn.visible = function(partial) {

    var $t = $(this),
      $w = $(window),
      viewTop = $w.scrollTop(),
      viewBottom = viewTop + $w.height(),
      _top = $t.offset().top,
      _bottom = _top + $t.height(),
      compareTop = partial === true ? _bottom : _top,
      compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };

})(jQuery);

var win = $(window);

var allModifications = $(".container");


//make all elements visible that are directly visible
allModifications.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.find(".half-width-text").addClass("open");
    el.find(".list-div ul li").addClass("animate");
  }
});


//make elements visible that get scrolled into the viewport
win.scroll(function(event) {
  var current = 5;
  var current2 = 1;
  allModifications.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.find(".half-width-text").addClass("open");
      el.find(".list-div ul li").each(function() {
        $(this).addClass("animate").css("animation-delay", current + 's');
        current++;
      });
      el.find(".list-div2 ul li").each(function() {
        $(this).addClass("animate").css("animation-delay", current2 + 's');
        current2++;
      });
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="full-width">
    <iframe class="video-iframe fullsize"></iframe>
    <a href="#section2">
      <span class="dot">
            <i class="arrow-down"></i>
          </span>
    </a>
  </div>
  <div class="half-width" id="section2">
    <div class="half-width-content">
      <h1></h1>
      <div class="half-width-text">

        <div class="text-content">
          <p>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="half-width">
    <div class="half-width-content">
      <div class="instagram-slideshow" id="1">
        <img class="slide">
      </div>
    </div>
  </div>
  <div class="half-width section3">
    <div class="half-width-content">
      <div class="instagram-slideshow" id="2">
        <img class="slide">
      </div>
    </div>
  </div>
  <div class="half-width section3">
    <div class="half-width-content">
      <div class="middle-text">
        <h2></h2>
        <p></p>
        <div class="list-div">
          <ul class="items-list" id="list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <img class="hand-writing-img">
      </div>
    </div>
  </div>
  <div class="full-width section3">
    <div class="content">
      <div class="third-parent">
        <div class="third" id="one">
          <img>
        </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1></h1>
            <div class="list-div2">
              <ul class="items-list2" id="list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="third" id="three">
          <img>
        </div>
      </div>
    </div>
  </div>
</div>