Пересечение Наблюдатель: наблюдать за несколькими целями

Question

Я довольно javascript ладья ie, и пытаюсь разобраться с пересечением наблюдателя. В моем проекте я хочу наблюдать за несколькими целями: разделами, чтобы применить класс «активный» к ссылкам, и указанием c классов для создания анимации gsap (или позже просто изменить классы).

Мне удалось заставить что-то работать, но это повторяется и уродливо, я хотел бы иметь чистую отправную точку.

Вот мой рабочий и повторяющийся код:

const changeNav = (entries, observer) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting && entry.intersectionRatio >= 0.55) {
            document.querySelector('.active').classList.remove('active');
            var id = entry.target.getAttribute('id');
            var main = document.querySelector('main');
            main.querySelector(`[href="#${id}"]`).classList.add('active');
        }
    });
};

const options = {
    threshold: 0.55,
};

let observer = new IntersectionObserver(changeNav, options);

const sections = document.querySelectorAll('section');
sections.forEach((section) => {
    observer.observe(section);
});

//Repeating Code :

const parallax = (entries, observer2) => {
    entries.forEach((entry) => {
        // verify the element is intersecting
        if (entry.isIntersecting && entry.intersectionRatio >= 0.55) {
            let tl2 = gsap.timeline({ repeat: 0, repeatDelay: 1 });
            tl2.to('.animgsap', {
                duration: 5,
                opacity: 1,
                y: 0,
                stagger: 0.2,
            });
        }
    });
};

let observer2 = new IntersectionObserver(parallax, options);

const gsapEl = document.querySelectorAll('.gsap');
gsapEl.forEach((element) => {
    observer2.observe(element);
});

Я пытался сгруппировать все в одном наблюдателе, как это, но возникли проблемы (Не удается прочитать свойство 'classList' из null)

const changeNav = (entries, observer) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting && entry.intersectionRatio >= 0.55) {
            document.querySelector('.active').classList.remove('active');
            var id = entry.target.getAttribute('id');
            var main = document.querySelector('main');
            main.querySelector(`[href="#${id}"]`).classList.add('active');

            let tl2 = gsap.timeline({ repeat: 0, repeatDelay: 1 });
            tl2.to('.animgsap', {
                duration: 5,
                opacity: 1,
                y: 0,
                stagger: 0.2,
            });
        }
    });
};


const options = {
    threshold: 0.55,
};

let observer = new IntersectionObserver(changeNav, options);

const sections = document.querySelectorAll('section');
sections.forEach((section) => {
    observer.observe(section);
});

const gsapEl = document.querySelectorAll('.gsap');
gsapEl.forEach((element) => {
    observer.observe(element);
});

Может кто-нибудь помочь мне разобраться в этом беспорядке? Я не добавил html и CSS, но если вам нужна конкретная ситуация, я сделаю это.

Заранее спасибо и держите себя в безопасности дома!