Alexander Bazhenov

Не оборачивай td в div внутри tr.
Как вариант, убери все дивы, что написал и в JS тебе потребуется всего один обработчик на самой таблице:

const table = document.querySelector("table");
table.addEventListener("click", (e) => {
  if (e.target.tagName === "TD" && e.target.parentElement.children[0] !== e.target) {
    console.log('Тут твой код');
  }
});

Тут мы проверяем, что target клика пришелся на один из TD, а затем проверяем, что это не первый TD в своем родителе.

Ты пытаешься всем элементам установить один триггер (для каждого экземпляра scrollTrigger может быть только один триггер, самому GSAP-у для анимирования можно скормить массив элементов, а scrollTrigger-у нет).

Как вариант, ScrollTrigger не помещать в анимацию, а наоборот:

const collageItems = Array.from(document.querySelectorAll(".collage__item"));
collageItems.forEach((elem) => {
  ScrollTrigger.create({
    trigger: elem,
    start: "top 75%", // к примеру :)
    animation: gsap.from(elem, {
      autoAlpha: 0,
      y: 150,
      duration: 1.5,
      ease: "power1.out"
    })
  });
});

Воспользуйся библиотекой GSAP - https://greensock.com/ и подключи ее плагин ScrollTrigger. Оба инструмента бесплатные.
Пример нужной тебе реализации есть в официальных примерах здесь.
Параметр, который тебя интересует и влияет на прогресс анимации, это "scrub". Саму полосу можешь анимировать как и в примере с помощью scaleX (только не забудь указать привязку transformOrigin: 'left center'.

Для более сложных вещей, можешь найти в документации ScrollTrigger свойство onUpdate, где ты можешь напрямую отслеживать ход анимации.