Проблема с запуском нескольких анимаций при прокрутке. ⇐ Javascript

[Гость]

Я плохо разбираюсь в JS и пытаюсь реализовать анимацию при прокрутке. Я использовал этот код https://codepen.io/darrielleevans/pen/gOjgKBY

Проблема, с которой я столкнулся, заключается в том, что в моем коде есть несколько элементов div, таких как постепенное появление, но они проходят через постепенное появление-1, постепенное появление-2 и так далее. Есть ли способ изменить код JS, используемый в приведенном выше коде, чтобы каждый из элементов div был нацелен отдельно? (с каждым из элементов div связана своя анимация)

когда я изменил код JS, написанный пером, чтобы он выглядел примерно так:

const elements = document.querySelectorAll('.fade-in-1'); константные параметры = { корень: ноль, rootMargin: '0px', порог: .4 } константные обратные вызовы = (записи) => { записи.forEach(запись => { если (entry.isIntersecting){ запись.target.classList.add('активный'); } }); } пусть наблюдатель = новый IntersectionObserver (обратные вызовы, параметры); elements.forEach(element => { наблюдатель.наблюдать(элемент); }); const elements1 = document.querySelectorAll('.fade-in-2'); константные параметры1 = { корень: ноль, rootMargin: '0px', порог: .4 } const callbacks1 = (записи) => { записи.forEach(запись => { если (entry.isIntersecting){ запись.target.classList.add('активный'); } }); } пусть наблюдатель1 = новый IntersectionObserver(обратные вызовы, параметры); elements.forEach(element => { наблюдатель.наблюдать(элемент); }); Второе добавление js Fade-in-2 не срабатывает.