const mainSection = document.getElementById("main-section");
const bgImage = document.getElementById("bg-image");

const animationTimingProps = {
  duration: 1,
  ease: Expo.easeOut
};

const setRadius = gsap.quickTo(bgImage, "--radius", {
  ...animationTimingProps
});

const setX = gsap.quickTo(bgImage, "--x", {
  ...animationTimingProps
});

const setY = gsap.quickTo(bgImage, "--y", {
  ...animationTimingProps
});

const scrollThreshold = 10;
let isScrolling = false;

// Part 1:
mainSection.addEventListener("mousemove", (e) => {
  if (isScrolling) return false;
  const { pageY: y, pageX: x } = e;
  setRadius(100);
  setX(x);
  setY(y);
});

document.addEventListener("scroll", () => {
  isScrolling = window.scrollY > scrollThreshold;
});

// Part 2:
const {
  width: sectionWidth,
  height: sectionHeight
} = mainSection.getBoundingClientRect();

// Using scrub:
const timeline = gsap.timeline({
  scrollTrigger: {
    trigger: mainSection,
    scrub: 1,
    start: `bottom+=${scrollThreshold} bottom`,
    refreshPriority: 10,
    end: `${window.innerHeight * 3}`,
    toggleActions: "play none reverse reset",
    pin: true
  }
});

timeline.to(bgImage, {
  "--radius": `${sectionWidth * 0.8}px`
});

// Without using scrub. The idea is to make the circle radius attached to the scrub animation, and also move the clip path smoothly to the center when user scrolls down

gsap.to(bgImage, {
  "--x": `${sectionWidth / 2}px`,
  "--y": `${sectionHeight / 2}px`,
  duration: 2,
  scrollTrigger: {
    trigger: mainSection,
    start: `bottom+=${scrollThreshold} bottom`,
    toggleActions: "play none reverse reverse"
  }
});