Edit in JSFiddle

$(function() {
  var controller = new ScrollMagic.Controller();

  var scene = new ScrollMagic.Scene({
    triggerElement: ".data-item.ratio",
  })
  scene.on("enter", function(event) {
    $(".data-item.ratio .ratioImg").addClass("active");
  })
  .addTo(controller);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>

<div class="data-item ratio">
  <div class="block_img">
    <div class="ratioImg type01">
      <p>1</p>
    </div>
    <div class="ratioImg type02">
      <p>2</p>
    </div>
  </div>
</div>
.block_img {
  text-align:center;
  width: 100%;
  .ratioImg {
    margin: 1%;
    width: 160px;
    transition: 0.4s;
    transform: scale(0);
    display: inline-block;
    vertical-align: middle;
    &.active {
      transform: scale(1);
    }
    &.type02 {
      transition-delay: 0.4s; // ここがポイント!!
    }
    p {
      text-align: center;
      font-size: 60px;
      border: 4px solid #000;
      border-radius: 50%;
      width: 160px;
      height: 160px;
      line-height: 145px;
      position: relative;
    }
  }
}