console.clear();

let points = gsap.utils.toArray(".scroll-item");

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".scroll-elem",
    endTrigger: ".scroll-end",
    start: "bottom bottom",
    markers: true,
    scrub: true,
    pin: ".scroll-wrap",
    snap: {
      snapTo: 1 / points.length
    }
  }
});

points.forEach(function (elem, i) {
  gsap.set(elem, { position: "absolute", bottom: 0 });
  tl.to(elem, { zIndex: i + 1 }, i).from(
    elem.querySelector(".text"),
    { autoAlpha: 0, translateY: -100 },
    i
  );
  if (i != points.length - 1) {
    tl.to(
      elem.querySelector(".text"),
      { autoAlpha: 0, translateY: 100 },
      i + 1
    );
  }
});
gsap.utils.toArray(".indicator").forEach(function (a, i) {
  a.addEventListener("click", function (e) {
    e.preventDefault();
    const start = tl.scrollTrigger.start;
    const end = tl.scrollTrigger.end;
    gsap.to(window, {
      duration: 0.65,
      ease: "none",
      scrollTo: {
        y: end - ((end - start) * Math.abs(i - (points.length - 1))) / points.length
      }
    });
  });
});
let anchors = gsap.utils.toArray(".js-anchor").map((el) => document.querySelector(el.getAttribute("href"))),
    scrollLookup = getScrollLookup(anchors, {start: "top top", pinnedContainer: ".scroll-wrap" });

gsap.utils.toArray(".js-anchor").forEach(function (a, i) {
  a.addEventListener("click", function (e) {
    e.preventDefault();
    gsap.to(window, {
      duration: 0.65,
      ease: "none",
      scrollTo: scrollLookup(anchors[i])
    });
  });
});

ScrollTrigger.sort();




/*
Returns a FUNCTION that you can feed an element to get its scroll position.
- targets: selector text, element, or Array of elements
- config: an object with any of the following optional properties:
  - start: defaults to "top top" but can be anything like "center center", "100px 80%", etc. Same format as "start" and "end" ScrollTrigger values.
  - containerAnimation: the horizontal scrolling tween/timeline. Must have an ease of "none"/"linear".
  - pinnedContainer: if you're pinning a container of the element(s), you must define it so that ScrollTrigger can make the proper accommodations.
*/
function getScrollLookup(
  targets,
  { start, pinnedContainer, containerAnimation }
) {
  let triggers = gsap.utils.toArray(targets).map((el) =>
      ScrollTrigger.create({
        trigger: el,
        start: start || "top top",
        pinnedContainer: pinnedContainer,
        refreshPriority: -10,
        containerAnimation: containerAnimation
      })
    ),
    st = containerAnimation && containerAnimation.scrollTrigger;
  return (target) => {
    let t = gsap.utils.toArray(target)[0],
      i = triggers.length;
    while (i-- && triggers[i].trigger !== t) {}
    if (i < 0) {
      return console.warn("target not found", target);
    }
    return containerAnimation
      ? st.start +
          (triggers[i].start / containerAnimation.duration()) *
            (st.end - st.start)
      : triggers[i].start;
  };
}