当元素在视口中时触发tweenmax动画，不在视口中时重置tweenmax动画

Question

我正在尝试使该部分进入视口后放大背景图像，并且当该部分离开视口时，应将背景图像设置为其初始状态（即放大）。我做了这个JSFiddle。

HTML：

<div class="demo">
  <div class="zoom"></div>
</div>
<div class="demo">
  <div class="zoom"></div>
</div>
<div class="demo">
  <div class="zoom"></div>
</div>
<div class="demo">
  <div class="zoom"></div>
</div>

JS：

var controller = new ScrollMagic.Controller();

// loop through all elements
$('.zoom').each(function() {

  var tween = new TimelineMax();

  var zoomOut = TweenLite.from($(this),3,{scale:2,rotationZ:0.01});
  var zoomIn = TweenLite.to($(this),0.01,{scale:1,rotationZ:0});

tween
    .add(zoomOut)
    .add(zoomIn)

  var scene = new ScrollMagic.Scene({triggerElement: this, offset: '50%'})
  .setTween(tween) // trigger a TweenMax.to tween
  .addIndicators()
  .addTo(controller);

});

在这种情况下，当我假设从第3部分滚动到第2部分时，“第一部分”中的图像仅动画一次，并且动画无法按预期工作。我正在尝试在此website上进行类似的操作。

请帮助。