window.__STYLEGALLERY_ASSETS__={};
function playAnimation(shape) {
  let tl = gsap.timeline();
  tl.from(shape, {
    opacity: 0,
    scale: 0,
    ease: "elastic.out(1,0.3)"
  }).to(shape, {
    rotation: "random([-360, 360])"
  }, "<").to(shape, {
    y: "120vh",
    ease: "back.in(.4)",
    duration: 1
  }, 0);
}
let gap = 100;
let flair = gsap.utils.toArray(".flair");
let index = 0;
let wrapper = gsap.utils.wrap(0, flair.length);
gsap.defaults({ duration: 1 });
let mousePos = { x: 0, y: 0 };
let lastMousePos = mousePos;
let cachedMousePos = mousePos;
window.addEventListener("mousemove", (e) => {
  mousePos = {
    x: e.x,
    y: e.y
  };
});
gsap.ticker.add(ImageTrail);
function ImageTrail() {
  let travelDistance = Math.hypot(
    lastMousePos.x - mousePos.x,
    lastMousePos.y - mousePos.y
  );
  cachedMousePos.x = gsap.utils.interpolate(
    cachedMousePos.x || mousePos.x,
    mousePos.x,
    0.1
  );
  cachedMousePos.y = gsap.utils.interpolate(
    cachedMousePos.y || mousePos.y,
    mousePos.y,
    0.1
  );
  if (travelDistance > gap) {
    animateImage();
    lastMousePos = mousePos;
  }
}
function animateImage() {
  let wrappedIndex = wrapper(index);
  console.log(index, flair.length);
  let img = flair[wrappedIndex];
  gsap.killTweensOf(img);
  gsap.set(img, {
    clearProps: "all"
  });
  gsap.set(img, {
    opacity: 1,
    left: mousePos.x,
    top: mousePos.y,
    xPercent: -50,
    yPercent: -50
  });
  playAnimation(img);
  index++;
}
const previewTrailSeed = flair.slice(0, 5);
gsap.set(previewTrailSeed, { opacity: 1, scale: 1, left: (i) => innerWidth * (0.22 + i * 0.14), top: (i) => innerHeight * (0.37 + Math.sin(i) * 0.08), xPercent: -50, yPercent: -50, rotation: (i) => (i - 2) * 16 });
addEventListener("mousemove", () => gsap.set(previewTrailSeed, { opacity: 0 }), { once: true });