Как на GSAP при scrollTrigger сделать последовательное появление элементов с одинаковым классом?

Question

[Влад]

Используя библиотеку wow.js это сделать просто.
Но мне нужно сделать это на GSAP.

const collageItems = document.querySelectorAll(".collage__item");
gsap.from(collageItems, {
    scrollTrigger: {
      trigger: collageItems,
    },
    autoAlpha: 0,
    y: 150,
    duration: 1.5,
    ease: "power1.out"
});

Когда я прописываю код выше, то триггером сразу для всех элементов является самый первый элемент с классом .collage__item, т.е. все элементы с таким классом начинают всплывать как только первый появляется в области window.

Как сделать, так чтобы эффект всплытия применялся к каждому конкретно?

Comments

[Александр]

А если использовать метод forEach для перебора элементов, и на каждом шаге задержку delay в зависимости от индекса элемента?

const collageItems = document.querySelectorAll(".collage__item");

collageItems.forEach((item, index) => {
  gsap.from(item, {
    scrollTrigger: {
      trigger: item,
    },
    autoAlpha: 0,
    y: 150,
    duration: 1.5,
    ease: "power1.out",
    delay: index * 0.5, // задержка для каждого элемента
  });
});

Задержку только поставь которая тебе нужна

Answer 1

[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"
    })
  });
});