在固定场景中制作动画/创建场景

Question

我已经阅读了一些示例，但没有找到一个可行的示例。

基本上是尝试固定div，并在用户滚动时使其中的子div处于动画状态，一旦所有子div都完成了动画设置，便会释放该div。

这是我正在尝试的方法，但是.setTween不透明度动画似乎不起作用。

<div id="pinned-scene">
  <div class="scene" id="scene1">Scene 1</div>
  <div class="scene" id="scene2">Scene 2</div>
  <div class="scene" id="scene3">Scene 3</div>
  <div class="scene" id="scene4">Scene 4</div>
  <div class="scene" id="scene5">Scene 5</div>
</div>

// pin scene
new ScrollMagic.Scene({duration: 1000, triggerElement: "#pinned-scene"})
.setPin("#pinned-scene")
.addTo(controller);

// animation scene
new ScrollMagic.Scene({triggerElement: "#pinned-scene", offset: 200})
.setTween("#scene", {opacity: 0.5})
.addTo(controller);