Вот вам совет, который сэкономил мне кучу времени при работе с JS и интеграции анимации на 1 лендинг.
Недавно открыл для себя "Intersection Observer" - JS API, которое позволяет вызывать event если объект виден в поле зрения
document.querySelectorAll(".animate").forEach((el) => observer.observe(el));
const targets = document.querySelectorAll('.animate_')
const callback = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('animate__animated','animate__fadeInRight');
observer.unobserve(entry.target)
}
})
}
const observer = new IntersectionObserver(callback)
targets.forEach((image) => observer.observe(image))
Удобно, если вам надо получить все необходимые объекты и добавить анимацию