背景视频是由ScrollMagic一开始的最后一个场景触发的

我正在用ScrollMagic构建一个网站，但我的视频背景开始出现问题，即最后一个场景首先被触发，直到我开始在第一个锚点向下滚动，这使它再次回到正轨。

我该如何解决这个问题？

Fiddle：https://jsfiddle.net/Lx4m4ehd/6/

HTML

<video autoplay loop id="bg_video">
  <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_5mb.mp4" type="video/mp4">
</video>
<section id="section1">Section 1</section>
<section id="section2">Section 3</section>
<section id="section2">Section 4</section>

CSS

body,
html {
  height: 100%;
  width: 100%;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* {
  margin: 0;
  padding: 0;
}
section {
  height: 100%;
  width: 100%;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#section1 {}
#section2 {}
video#bg_video {
  object-fit: initial;
  position: fixed;
  height: 900px;
  width: 500px;
  z-index: -1;
  will-change: transform; // creates a new paint layer
}

JS

var controller = new ScrollMagic.Controller({
  globalSceneOptions: {
    triggerHook: "onLeave",
    duration: "100%"
  }
});
var tween = new TimelineMax()
  .add([
    TweenMax.fromTo($('#bg_video'), 1, {
      y: 0
    }, {
      y: 100
    })
  ]);
new ScrollMagic.Scene({
    triggerElement: "#section1"
  })
  .setTween(tween)
  .addIndicators()
  .addTo(controller);
var tween = new TimelineMax()
  .add([
    TweenMax.fromTo($('#bg_video'), 1, {
      y: 100
    }, {
      y: 200
    })
  ]);
new ScrollMagic.Scene({
    triggerElement: "#section2"
  })
  .setTween(tween)
  .addIndicators()
  .addTo(controller);