На странице есть 2-ве секции которые содержат в себе от 5 до 6 элементов. При скроле страницы до секции с элементами, запускается функция с добавлением класса активного состояния (анимацией). Но сейчас, при прокрутке до 1-й секции сейчас запускается анимация сразу на 2-й секции и докрутив уже до второй секции анимация не запускается т.е функция уже проставила активный класс всем элементам ещё в тот момент когда запустилась на 1-й секции. Как можно организоваться нормальный порядок запуска анимации?
window.onscroll = function () {
programmList('#standart');
programmList('#addational');
};
function programmList(ind) {
var section = document.querySelector(ind);
var toSection = section.getBoundingClientRect().top;
if(window.pageYOffset >= (toSection + 200)) {
var sectionItem = section.querySelectorAll('.programm__item');
console.log('Start Animation ' + ind);
var i = 0;
var speed = 500;
var activeItem = setInterval(function () {
sectionItem[i].classList.add('programm__item_active');
i++;
if(i >= sectionItem.length) {
clearInterval(activeItem);
}
}, speed)
}
}