Intersection Observerを使った
アニメーション

<!-- IE11対策をするなら -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

var option = {
  root: null, //nullでブラウザ画面を対象にする
  rootMargin: "0% 0% -20% 0%", //画面の下から-20%の位置をターゲットと交差する位置に指定
  threshold: 0.2, //指定した要素が画面に20%入るとコールバッイベント発生
};

// 交差した際の処理を記載
var callback = function (entries) {
  
  entries.forEach(function (entry) {
    
    if (entry.intersectionRatio > 0.2) { //交差する位置が20%を超えたら…

      var targets = entry.target.getElementsByClassName("d-demo__block");
      var targetsArray = Array.prototype.slice.call(targets, 0); //配列に変換

      targetsArray.forEach(function (item) { 
        var targetClassList = item.classList;

        if( targetClassList.contains('is-fade_in_side') == true ){ 
          targetClassList.add("is-fade_in_side--done"); 
        } else if (targetClassList.contains('is-fade_in_updown') == true) { 
          targetClassList.add("is-fade_in_updown--done"); 
        } else if(targetClassList.contains('is-fade_in_zoom') == true){ 
          targetClassList.add("is-fade_in_zoom--done"); 
       } else if(targetClassList.contains('is-bounce') == true){
       var itemChildren = item.children;

       for (let i = 0; i < itemChildren.length; i++) {
       setTimeout(function () {
       itemChildren[i].classList.add("is-bounce--done");
        }, i * 80);
       }

       }
      });
      observeres.unobserve(entry.target);
    }
  });
};
var observeres = new IntersectionObserver(callback, option);

var trigger = document.getElementsByClassName("js-trigger");

for (let i = 0; i < trigger.length; i++) {
  observeres.observe(trigger[i]); 
}

/* アニメーションを使うため先にベンダープレフィックスを定義
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@mixin keyframes($animation-name: animation) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

/* アニメーションを使うため上とセット
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@mixin animation($animation-name) {
  -webkit-animation: $animation-name;
  animation: $animation-name;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* zoomのkeyframes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@include keyframes (fade-in-zoom) {
  0% {
    filter: blur(3px);
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

/* クラス名の指定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.is-fade_in_zoom {
  opacity: 0;
}
.is-fade_in_zoom.is-fade_in_zoom--done {
  opacity: 1;
  .demo__img {
    @include animation(fade-in-zoom 1s ease 0.1s);
  }
}

<section class="d-demo__section js-trigger">
  <div class="d-demo__section-inner">
    <div class="d-demo__block is-fade_in_zoom">
      <div class="d-demo__img">
        <img src="./images/observer-img03.jpg" alt="" />
      </div>
      <div class="d-demo__img">
        <img src="./images/observer-img04.jpg" alt="" />
      </div>
    </div>
  </div>
</section>