// Original demo by @GreenSock - https://codepen.io/GreenSock/pen/JawEyN

(function() {
   "use strict";
gsap.registerPlugin(ScrollTrigger, ScrollSmoother, Draggable, InertiaPlugin);

const mm = gsap.matchMedia();

let smoother;

const wrapImg = gsap.utils.toArray("img");
   const percentage = document.querySelector(".percentage");
   const loaderText = document.querySelectorAll(".loader-text");
   const loaderBg = document.querySelector(".loader-bg");
   const updateProgress = (instance) => percentage.textContent = `' ${Math.round(instance.progressedCount * 100 / wrapImg.length)}%`;
   const Preload = () => {
      document.scrollingElement.scrollTo(0, 0);
      var tl = gsap.timeline({
         onComplete: () => {
            document.body.style.overflow = "auto";
            smoother.paused(false);
         },
      });
      tl.to(percentage, {
         yPercent: -10,
         autoAlpha: 0,
         duration: 1.8
      })
      .set(loaderText, { perspective: 400 })
      .from(loaderText, {
         autoAlpha: 0,
         color: "random(['#ccd0db', '#615651', '#BF9865', '#455d7a', '#fbf2d5'])",
         duration: 2.8,
         scale: 0,
         y: 80,
         rotationX: 270,
         transformOrigin: "0% 50% -50",
         ease: "back",
         stagger: 0.3,
      }, "-=.6")
      .to(loaderText, {
         autoAlpha: 0,
         y: -50,
         color: "random(['#ccd0db', '#615651', '#BF9865', '#455d7a', '#fbf2d5'])",
         stagger: 0.2,
         duration: 2
      }, "-=.6")
      .to(loaderBg, {
         autoAlpha: 1,
         yPercent: -100,
         duration: 1.2,
         ease: "expo.inOut"
      }, "-=.2")
   };
   
   imagesLoaded(wrapImg).on("progress", updateProgress).on("always", Preload);

const createFadeTweens = () => {
  
window.addEventListener('load', (event) => {
gsap.config({ trialWarn: false });

const container = document.querySelector(".js-experience-slider");
const proxy = container.querySelector(".proxy");
const slider = document.querySelector(".js-experience-slider__inner");
const sliderContent = document.querySelector(".js-experience-slider__content");
const slides = [...container.querySelectorAll(".js-experience-slide")];

let sliderWidth = 0;
let prevSliderWidth = 0;
// let pressedTop = false;
let offset = 0;

const setBounds = () => {
  prevSliderWidth = sliderWidth;

  sliderWidth = slides[0].offsetWidth * slides.length;

  const newX =
    (sliderWidth / 100) *
    (gsap.getProperty(proxy, "x") / (prevSliderWidth / 100));

  gsap.to([slider, proxy], { width: sliderWidth, x: newX });
};

setBounds();
window.addEventListener("resize", throttle(300, false, setBounds));

const draggable = Draggable.create(proxy, {
  type: "x",
  trigger: container,
  bounds: container,
  zIndexBoost: false,
  throwProps: true,
  edgeResistance: 0.75,
  // edgeResistance: 1,
  dragResistance: 0.4,
  onPress: function (e) {
    var bounds = this.target.getBoundingClientRect();
    // pressedTop = e.clientY < bounds.y + bounds.height / 2;

    //keep track of how far apart the proxy is from the slider because when the user presses down, we want to IMMEDIATELY stop any motion, thus this offset value becomes baked in until release.
    // offset = this.x - slider._gsTransform.x;
    offset = this.x - gsap.getProperty(proxy, "x");

    gsap.killTweensOf(slider); //in case it's moving
    gsap.to(slider, { skewX: 0, duration: 0.2 });
  },
  onDrag: function () {
    gsap.to(slider, {
      duration: 0.8,
      x: () => this.x - offset,
      skewX: function (v) {
        var skew = InertiaPlugin.getVelocity(proxy, "x") / 200;

        // return pressedTop ? -skew : skew;
        return gsap.utils.clamp(-10, 10, skew);
      },
      overwrite: "auto",
      ease: "power2"
    });
  },
  onRelease: function () {
    // if the user just presses down and releases without really moving much at all, there's no need to do a throwProps tween.

    let velocity = InertiaPlugin.getVelocity(proxy, "x");

    if (this.tween && Math.abs(velocity) > 20) {
      gsap.to(slider, {
        overwrite: "auto",
        inertia: { x: { velocity, end: this.endX } }
      });
    }

    gsap.to(slider, { skewX: 0, duration: 0.5, overwrite: "auto" });
  }
});
  });
   };

mm.add("(min-width: 800px)", () => {
  let skewSetter = gsap.quickTo(".js-skew", "skewY"), // fast
    clamp = gsap.utils.clamp(-20, 20); // don't let the skew go beyond 20 degrees.

  smoother = ScrollSmoother.create({
    wrapper: "#smooth-wrapper",
    content: "#smooth-content",
    smooth: 2,
    normalizeScroll: true,
    ignoreMobileResize: true,
    effects: true,
    onUpdate: (self) => skewSetter(clamp(self.getVelocity() / -150)),
    onStop: () => skewSetter(0)
  });
  
  createFadeTweens();

   return () => {
            smoother.kill();
            revertItems();
        }
});

mm.add("(max-width: 767px)", () => {
        createFadeTweens();
        return () => revertItems();
    });

smoother.paused(true); // Preload
ScrollTrigger.refresh()
})(); //"use strict";