[villiwalla]

На странице есть 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)
    }
}

<header> 
 // Первый экран и навигация
</header>
<section id="presentation" class="presentation">
    <div id="presentation__slide" class="slide">
        <ul class="slide__outer">
            <li class="slide__item">
                <img src="/image/slide/slide1.jpg" alt="" class="responsive-img">
            </li>
            <li class="slide__item">
                <img src="/image/slide/slide2.jpg" alt="" class="responsive-img">
            </li>
            <li class="slide__item">
                <img src="/image/slide/slide3.jpg" alt="" class="responsive-img">
            </li>
            <li class="slide__item">
                <img src="/image/slide/slide4.jpg" alt="" class="responsive-img">
            </li>
            <li class="slide__item">
                <img src="/image/slide/slide5.jpg" alt="" class="responsive-img">
            </li>
            <li class="slide__item">
                <img src="/image/slide/slide6.jpg" alt="" class="responsive-img">
            </li>
        </ul>
    </div>
    <div class="presentation__content">
       <p>Итальянское искусство во всей своей многогранности: чудная аура керамики, гастрономия и виноделие. Словно ожившие пейзажи художников эпохи Возрождения в уникальных ландшафтах Равенны, Римини, Болоньи.</p>
       <p>Знакомство с мастерами гончарного искусства, их ремеслом. И, говорим по-итальянски! Возможность изучения итальянского языка в рамках эффективного курса обучения во время путешествия, результатом которого станет Ваше взаимопонимание и успешное общение с Италией, ее искусством, культурой и традициями.</p>
    </div>
</section>
<section id="addational" class="programm__addational">
    <h1 class="programm__headig text-center">Индивидуальныя программа:</h1>
    <p class="programm__content">Каждая программа может быть изменена и осуществлена по требованиям участников с предварительным определением стоимости дополнительных мастер классов и экскурсий.</p>
    <p class="programm__content">Организаторы готовы удовлетворить любые дополнительные желания к согласованной программе по просьбе участников перед поездкой и во время пребывания в Фаэнце.</p>
    <p class="text-bold text-upper text-center">Предлагаются:</p>

    <div class="programm__list">

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/music_key_opt.svg"></object>
            </div>
            <div class="programm__title">Музыкальные мастер-классы</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/planeer_opt.svg"></object>
            </div>
            <div class="programm__title">Пленэр с художником Фатеевым</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/colessium_opt.svg"></object>
            </div>
            <div class="programm__title">Мастер-классы по истории, искусству и литературе Италии</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/pasta_opt.svg"></object>
            </div>
            <div class="programm__title">Дегустации местных продуктов, эногастрономические туры</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/pizza_opt.svg"></object>
            </div>
            <div class="programm__title">Италия в одной пицце в ресторане "O fiore mio"</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/chef_opt.svg"></object>
            </div>
            <div class="programm__title">Кулинарные мастер-классы «Руки в тесте»</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object type="image/svg+xml" data="/image/svg/way_opt.svg"></object>
            </div>
            <div class="programm__title">Экскурсии в другие итальянские города</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object data="/image/svg/bicycle_opt.svg" type="image/svg+xml"></object>
            </div>
            <div class="programm__title">Велосипедные туры</div>
        </div>

        <div class="programm__item">
            <div class="programm__icon">
                <object data="/image/svg/hot_spring_opt.svg" type="image/svg+xml"></object>
            </div>
            <div class="programm__title">Термальные однодневные процедуры</div>
        </div>

    </div>

    <div class="programm__price programm__price_nomrg">
        <div class="programm__cost">Создайте свою мечту</div>
        <button class="programm__btn" data-type="constract">Создать свою программу</button>
        <p><small>* Цена дополнительных экскурсий и мероприятий зависит от количества желающих и от выбранного типа транспорта.</small></p>
    </div>

</section>