Animate Video on Scroll

by pphheerroonn

HTML

<div style="padding-bottom: 100vh" class="intro">
<h1 style="padding-top:100vh;">Hello There</h1>
<video width="1920" height="auto" style="width:100%;" source="" src="https://ie.business.selectonline.com/media/wysiwyg/video/macbook-air-promo.mp4" playsinline="" poster="" autoplay="autoplay" muted="muted" preload="none"></video>
<section>
  <h1>New Setcion</h1>
</section>


</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/jquery.ScrollMagic.js" integrity="sha512-bvm+qYsmO30ffnPinuQh59T6PhZMktZeJPwImygJSEwVajnt5ZJfZqGpRYlhZxZuf9QpsQOJ2J6KEw/N9EKlpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js" integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js" integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" integrity="sha512-8Wy4KH0O+AuzjMm1w5QfZ5j5/y8Q/kcUktK9mPUVaUoBvh3QPUZB822W/vy7ULqri3yR8daH3F58+Y8Z08qzeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serifl
}
.intro{
  height: 100vh;
}