ScrollMagic：每个元素一个接一个的动画

Question

尝试使标题的每个[...] many statuses -------------------------------------------------------------------------------- --- Status Report Summary -------------------------------------------------------------------------------- 135 Completely validated 363 Considered valid 1 Dead property 1 Unreachable 500 Total 元素一个接一个地淡化，每个动画之间的间隔时间为一定时间。

尝试使用span循环执行此操作，但是什么也没发生，或者问题出在其他地方？我仍然不确定for是否应该在循环内。由于new Scene会更改每个循环，所以我猜应该会这样。

有人可以找到问题吗？谢谢！

var titleTween

var controller = new ScrollMagic.Controller();

$('#title').html(
  '<span>' +
  $('#title').html().split('').join('</span><span>') +
  '</span>'
);

var iMax = document.getElementById("title").length;

for (i = 0; i < iMax; i++) {
  var target = document.querySelector("h1").children[i],
    titleTween = new TweenMax.from(target, i + 1.5, {
      "opacity": 0,
      "transform": "translateY(100px)",
    });

  new ScrollMagic.Scene({
      offset: 200,
      reverse: true,
    })
    .setTween(titleTween)
    .addIndicators()
    .addTo(controller);
}

body {
  margin: 0;
  padding: 0;
}

div {
  height: 100vh;
  background: skyblue;
}

h1 {
  font-family: "Courgette", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 3em;
  text-align: center;
}

h1 span {
  opacity: 1;
  transform: translateY(0);
}

如果需要，这里是jsfiddle。