背景視頻被ScrollMagic開始的最後一幕觸發

Question

我正在用ScrollMagic構建一個網站，但我已經開始體驗到我的視頻背景的問題，那就是最後一個場景被觸發，直到我開始滾動在第一個錨點再次回到正軌。

我該如何解決這個問題？

小提琴：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來解決問題。

小提琴：https://jsfiddle.net/Lx4m4ehd/7/