console.clear(); // Start with a clean console on refesh 

ScrollTrigger.defaults({
  markers: true
});

const tl = gsap.timeline({
  scrollTrigger: {
    id: "clippath",
    trigger: ".video-background",
    start: "top top",
    end: "+=3000", // same values als other scrolltrigger 
    scrub: true
  }
});
tl.from("figure", {
  // duration: 2, // This does nothing in theory, because scrolltriggers is handling the duration
  clipPath: "inset(0px 294.913px 141.157px 409.571px)",
    ease: "none" // better with scrub-ed scrolltriggers
});
tl.to("figure",{ 
  // duration: 2, // This does nothing in theory, because scrolltriggers is handling the duration
  clipPath: "inset(0px 0px 0px 0px)" ,
    ease: "none" // better with scrub-ed scrolltriggers
});

let videoScroll = document.querySelector(".video-background"),
  frameNumber = 0,
  src = videoScroll.currentSrc || videoScroll.src;

videoScrollTL = gsap.timeline({
  defaults: { duration: 1 },
  scrollTrigger: {
    id: "video",
    trigger: ".video-background",
    pin: true,
    scale: 1,
    start: "top top",
    end: "+=3000",
    scrub: true,
    markers: true,
   // onUpdate: (self) => {
   //   frameNumber = (self.progress / 10) * 100 - 1; //this takes fine tuning divide your videos FPS by two. My video's FPS was 30, 14 was the sweet spot. -1 fixes an issue on safari where the video disappears at the end of the scrollTrigger
      //videoScroll.currentTime = frameNumber;
    //}
  }
});

/* Make sure the video is 'activated' on iOS */
function once(el, event, fn, opts) {
  var onceFn = function (e) {
    el.removeEventListener(event, onceFn);
    fn.apply(this, arguments);
  };
  el.addEventListener(event, onceFn, opts);
  return onceFn;
}

once(document.documentElement, "touchstart", function (e) {
  videoScroll.play();
  videoScroll.pause();
});

//make sure video has loaded
once(videoScroll, "loadedmetadata", function () {
  // BAD
  // videoScrollTL.fromTo(
  //   videoScroll,
  //   { currentTime: 0 },
  //   { currentTime: videoScroll.duration - 0.1 }
  // );
  videoScrollTL.add(mediaTimeline(videoScroll));
});

setTimeout(function () {
  if (window["fetch"]) {
    fetch(src)
      .then(function (response) {
        return response.blob();
      })
      .then(function (response) {
        var blobURL = URL.createObjectURL(response);
        var t = videoScroll.currentTime;
        once(document.documentElement, "touchstart", function (e) {
          videoScroll.setAttribute("src", blobURL);
          videoScroll.currentTime = t + 0.01;
        });
      });
  }
}, 0);



function mediaTimeline(media, config) {
	typeof(media) === "string" && (media = document.querySelector(media));
	let duration = media.duration,
			onUpdate = config && config.onUpdate,
			tl = gsap.timeline({
				paused: true,
				onUpdate() {
					if (tl.paused() || Math.abs(tl.time() * duration - media.currentTime) > 0.5) {
						media.currentTime = tl.time() * duration;
					}
					onUpdate && onUpdate.call(tl);
				}
			}),
			updateDuration = () => {
				duration = media.duration;
				tl.timeScale(1 / duration);
			},
			pause = tl.pause,
			play = tl.play;
	tl.set({}, {}, 1);
	media.addEventListener("durationchange", updateDuration);
	updateDuration();
	media.onplay = () => tl.play();
	media.onpause = () => tl.pause();
	media.ontimeupdate = () => {
		tl.time(media.currentTime / duration, true);
	}
	tl.pause = function() {
		media.pause();
		pause.apply(tl, arguments);
	};
	tl.play = function() {
		media.play();
		play.apply(tl, arguments);
		if (arguments.length) {
			media.currentTime = arguments[0];
		}
	}
	tl.media = media;
	return tl;
}