locomotive-scroll.js 사용하면서 aos.js, anchor 링크 사용하기

$(document).ready(function(){

    const locomotiveScroll = new LocomotiveScroll({
        el: document.querySelector('[data-scroll-container]'),
        smooth: true
    });



    // locomotive-scroll 사용하면서 anchor link 사용하기 위해 필요함  ---
    document.addEventListener('DOMContentLoaded', function () {
        function ScrollUpdateDelay() {
            setTimeout(function () {
                locomotiveScroll.update();
            }, 1000);
        }

        ScrollUpdateDelay();
    });

    // pc - header, footer link
    const anchorLinks = document.querySelectorAll('#header .header_box .h_nav .dep1 .dep1_li a, #footer .menu ul li a');

    anchorLinks.forEach((anchorLink) => {
        let hashval = anchorLink.getAttribute('href');
        let target = document.querySelector(hashval);

        anchorLink.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();

            locomotiveScroll.scrollTo(target);
        });
    });

    // mobile - sitemap link
    // const sitemap = document.querySelector('.siteMap_box');
    const anchorLinks2 = document.querySelectorAll('.siteMap_box .sm_dep1 a');
    anchorLinks2.forEach((anchorLink) => {

        let hashval = anchorLink.getAttribute('href');
        let target = document.querySelector(hashval);

        anchorLink.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();

            closeSitemap();

            setTimeout(() => {
                locomotiveScroll.scrollTo(target);
            }, 300);
        });
    });
    // ------------------------------------------------------------------------------



    AOS.init({
        // Global settings:

        // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
        duration: 1100, // values from 0 to 3000, with step 50ms
        once: true, // whether animation should happen only once - while scrolling down
    });


    console.log(AOS);


    // locomotive-scroll 사용하면서 aos.js 사용하려면 필요 ---
    let observer = new IntersectionObserver( (entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting){
                entry.target.classList.add('aos-animate');
            } else {
                // entry.target.classList.remove('aos-animate');
            }
        });
    });
    document.querySelectorAll('[data-aos]').forEach(aosElem => {
        observer.observe(aosElem)
    });
    // ------------------------------------------------------------------------------


});

코드 출처:
https://github.com/locomotivemtl/locomotive-scroll/issues/175
https://github.com/michalsnik/aos/issues/654