How to use scroll magic for video animation but only start video when container reaches the top

I'm using Scrollmagic to animate a video background Apple style. however, my video container is further down the page so when it gets to it the video has already started scrolling, I'm trying to find how to have the video "paused" until the container reaches the trigger.

const intro = document.querySelector(".intro");
const video = intro.querySelector("video");
const text = intro.querySelector("h1");
//END SECTION
const section = document.querySelector("section");
const end = section.querySelector("h1");

//SCROLLMAGIC
const controller = new ScrollMagic.Controller();

//Scenes
let scene = new ScrollMagic.Scene({
  duration: 2520,
  triggerElement: intro,
  triggerHook: 0
})
  .addIndicators()
  .setPin(intro)
  .addTo(controller);

//Text Animation
const textAnim = gsap.fromTo(text, 3, { opacity: 1 }, { opacity: 0 });

let scene2 = new ScrollMagic.Scene({
  duration: 3000,
  triggerElement: intro,
  triggerHook: 0
})
  .setTween(textAnim)
  .addTo(controller);

//Video Animation
let accelamount = 0.3;
let scrollpos = 0;
let delay = 0;

scene.on("update", e => {
  scrollpos = e.scrollPos / 1000;
});

setInterval(() => {
  delay += (scrollpos * 4 - delay) * accelamount;
  //console.log(scrollpos, delay);

  video.currentTime = delay;
}, 40);
console.log(video);

Here is a codepen example: https://codepen.io/dankron/pen/abQELXo

Does anyone know what am I missing here?

I've figure it you, there is scene.progess(state) that returns "before" / "during" / "after"

    scene.on('update', e => {

    if (scene.state() === 'BEFORE') {
      scrollpos = 0;
    }
    else if (scene.state() === 'DURING') {
      scrollpos = e.scrollPos / 1000;
    }
  });