console.clear();

document.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    gsap.registerPlugin(ScrollTrigger, MotionPathPlugin, Observer);

    var section = document.querySelector(".section");
    var section_2_container = document.querySelector(".section_2");
    var section1 = document.querySelector(".section_1");
    var section_2_content = document.querySelector(".section_2_content");
    var section3 = document.querySelector(".section_3");
    var container = document.querySelector(".container");

    var point1 = document.querySelector("#point1");

    var rec = document.querySelector("#rec");
    var path = document.querySelector("#path");
    let direction;

    let section_2 = gsap.timeline({
      scrollTrigger: {
        trigger: section_2_content,
        markers: true,
        start: "top +=200px",
        end: () => section_2_content.offsetHeight + 200,
        scrub: 1
      }
    });

    section_2.to(rec, {
      motionPath: {
        path: path,
        align: path,
        alignOrigin: [0.5, 0.5],
        autoRotate: true
      },
      immediateRender: true,
      // ease: pathEase(path),
      ease: "none"
    });
  }, 500);
});

// helper function that returns and ease that bends time to ensure the tractor stays relatively centered. Requires MotionPathPlugin of course
function pathEase(path, axis = "y", precision = 1) {
  let rawPath = MotionPathPlugin.cacheRawPathMeasurements(
      MotionPathPlugin.getRawPath(gsap.utils.toArray(path)[0]),
      Math.round(precision * 12)
    ),
    useX = axis === "x",
    start = rawPath[0][useX ? 0 : 1],
    end =
      rawPath[rawPath.length - 1][
        rawPath[rawPath.length - 1].length - (useX ? 2 : 1)
      ],
    range = end - start,
    l = Math.round(precision * 200),
    inc = 1 / l,
    positions = [0],
    a = [],
    minIndex = 0,
    getClosest = (p) => {
      while (positions[minIndex] <= p && minIndex++ < l) {}
      a.push(
        ((p - positions[minIndex - 1]) /
          (positions[minIndex] - positions[minIndex - 1])) *
          inc +
          minIndex * inc
      );
    },
    i = 1,
    p,
    v;
  for (; i < l; i++) {
    p = i / l;
    v = MotionPathPlugin.getPositionOnPath(rawPath, p)[axis];
    positions[i] = (v - start) / range;
  }
  positions[l] = 1;
  for (i = 0; i < l; i++) {
    getClosest(i / l);
  }
  a.push(1);
  return (p) => {
    let i = p * l,
      s = a[i | 0];
    return s + (a[Math.ceil(i)] - s) * (i % 1);
  };
}