在视图中滚动时触发打字机效果

Question

一旦用户在视图中滚动到容纳文本的容器，尝试找出一种用typed.js触发打字机效果的方法。

在这种情况下，重要的是我试图将其变成wordpress模板上的可重用元素，因此每个案例都是自包含的，并且不依赖于唯一（和有限的）标识符。

我尝试了各种插件，例如inview，waypoints等，其中一些部分完成了我想要的，有些没有。我目前的尝试是使用航路点，并认为我已经得到了正确的基本设置，但并不完全确定如何从这里开始。

我目前的设置如下：

$('.lettering').each(function() {
		
    var animatetext = $(this).html();
    var animateheight = $(this).css('height');
    var animatelettering = $('.lettering').each(function(){
        $(this).typed({ 
  				strings: [animatetext],
                typeSpeed: 1,
        });
    });
    new Waypoint.Inview({
      element: this,
      enter: function(direction) {
      },
      entered: function(direction) {
        animatelettering.typed()
      },
      exit: function(direction) {
        animatelettering.typed()
      },
      exited: function(direction) {
      }
    });
  });

div {
  height:100vh;
  background-color:red;
}

.highlight {
  color:white;
  background-color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.4/typed.min.js"></script>

<div>

</div>

<div class="highlight">

<span class="lettering">
  row 1 <br>
  row 2 <br>
  row 3
</span>

</div>

<div>

</div>

<div class="highlight">

<span class="lettering">
  row 1 <br>
  row 2 <br>
  row 3
</span>

</div>

很高兴收到关于如何开展这项工作的一些意见。谢谢！