console.clear();

gsap.registerPlugin(ScrollTrigger, ScrollSmoother,ScrollToPlugin);

  let smoother = ScrollSmoother.create({
  smooth: 2,   // seconds it takes to "catch up" to native scroll position
  effects: true, // look for data-speed and data-lag attributes on elements and animate accordingly
  smoothTouch: 0.1,
});

    var scrollComputer = document.querySelector("header a");
  scrollComputer.onclick = function() {
   console.log("scrollComputer");
   smoother.scrollTo("#computer", true, "top -250px");
 }


const video = document.querySelector(".video-background");
 

let tl = gsap.timeline({
  defaults: { duration: 1 },
  scrollTrigger: {
   trigger: ".section_computer",
   scrub: true,
   //markers: true,
   pin: true,
   start: () => "top top",
   end: () => "+=" + window.innerHeight,
   invalidateOnRefresh: true,
 }
});


tl.add(videoScrub(video, {
  duration: 3.75,
  paused: false
}))

tl.to(".panel-1", {
 keyframes: [
  {yPercent:0},
  {yPercent:-100, opacity:0}
 ]
},1);
  tl.to(".panel-2", {
 keyframes: [
  {xPercent:100, yPercent:100, opacity:0  },
  {xPercent:10, yPercent:80, opacity:1  },
  {xPercent:0, yPercent:0},
  {xPercent:0, yPercent:0 , delay:3 },
  {xPercent:0, yPercent:-100,opacity:0 ,duration:1 }
 ],

},"-=3.2");

  tl.to(".panel-3", {
 keyframes: [
 {xPercent:100, yPercent:100, opacity:0  },
  {xPercent:10, yPercent:80, opacity:1  },
  {xPercent:0, yPercent:0},
  {xPercent:0, yPercent:0 , delay:3 },
  {xPercent:0, yPercent:-100,opacity:0,duration:1  }
 ],
 ease: 'expo.inOut'

},"-=2.2");
console.log("tl duration", tl.duration())
tl.getChildren().forEach(c => console.log("animation", c.startTime(), c.duration()))

function videoScrub(video, vars) {
  video = gsap.utils.toArray(video)[0]; // in case selector text is fed in.
  let once = (el, event, fn) => {
        let onceFn = function () {
          el.removeEventListener(event, onceFn);
          fn.apply(this, arguments);
        };
        el.addEventListener(event, onceFn);
        return onceFn;
      },
      prepFunc = () => { video.play(); video.pause(); },
      prep = () => once(document.documentElement, "touchstart", prepFunc),
      src = video.currentSrc || video.src,
      tween = gsap.fromTo(video, {currentTime: 0}, {paused: true, immediateRender: false, currentTime: video.duration || 1, ease: "none", ...vars}),
      resetTime = () => (tween.vars.currentTime = video.duration || 1) && tween.invalidate();
  // once(video, "loadedmetadata", resetTime);
  prep();
  video.readyState ? resetTime() : once(video, "loadedmetadata", resetTime);
  return tween;
}