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

Question

我正在使用 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);

Answer 1

通过在除第一个场景之外的所有场景中删除 fromTo 并将其替换为 to 来解决问题。

Fiddle: https://jsfiddle.net/Lx4m4ehd/7/

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

Background video being triggered by last scene in the very beginning with ScrollMagic

html

javascript

jquery

scrollmagic

gsap