Search code examples
javascriptjqueryhtmlgsapscrollmagic

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

I am building a site with ScrollMagic but i have started to experience a problem with my my video background, which is that the last scene is triggered first until i start scrolling down in the first anchor point which gets it back on track again.

How do i solve this problem?

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);
Solution

  • Problem was solved by removing fromTo and replacing it with to on all the scenes except for the first.

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