Alexander Bazhenov

Ты пытаешься всем элементам установить один триггер (для каждого экземпляра 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, где ты можешь напрямую отслеживать ход анимации.