Михаил Оловянников

Всем привет. Решил свою проблему через дополнительное использование IntersectionObserver, который отслеживает блоки, помеченные AOS атрибутами. Инициализировал сам AOS через таймаут в 50 (не знаю зачем это нужно, но без этого не работает). Observer отслеживает теги, у которых еще не задан delay, как только delay через скрипт задается, блок перестает отслеживаться. Накидывание delay выполнено через FIFO. Вот рабочий код, может кому пригодиться:

const stack = []
const delayFactor = 300

const options = {
  rootMargin: '0px',
  threshold: 0.2,
}

const callback = entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      stack.push(entry.target)

      const delay = (stack.length - 1) * delayFactor

      entry.target.setAttribute('data-aos-delay', `${delay}`)

      setTimeout(() => {
        stack.shift()
      }, delay)
    }
  })
}

const observer = new IntersectionObserver(callback, options)

const elementsToTrack = document.querySelectorAll(
  '[data-aos]:not([data-aos-delay])'
)

elementsToTrack.forEach(element => {
  observer.observe(element)
})

Пример работы можно посмотреть на сайте: https://yourbanner.ru