gsap-09메뉴 이동 효과 (feat. scrollTrigger)

메뉴를 클릭하여 이동하는 기능을 만들어보자

<nav id="parallax__nav">
        <ul>
            <li><a href="#section1" class="active">s1</a></li>
            <li><a href="#section2">s2</a></li>
            <li><a href="#section3">s3</a></li>
            <li><a href="#section4">s4</a></li>
            <li><a href="#section5">s5</a></li>
            <li><a href="#section6">s6</a></li>
            <li><a href="#section7">s7</a></li>
            <li><a href="#section8">s8</a></li>
            <li><a href="#section9">s9</a></li>
        </ul>
    </nav>

let links = gsap.utils.toArray("#parallax__nav ul li a");

        links.forEach(link => {
            let element = document.querySelector(link.getAttribute("href"));
            let linkST = ScrollTrigger.create({
                trigger: element,
                start: "top top"
            });

            ScrollTrigger.create({
                trigger: element,
                start: "top center",
                end: "bottom center",
                onToggle: self => setActive(link)
            });

            link.addEventListener("click", e => {
                e.preventDefault();
                gsap.to(window, {duration: 1, scrollTo: linkST.start, overwrite: "auto"});
            })
        });

        function setActive(link){
            links.forEach(el => el.classList.remove("active"));
            link.classList.add("active");
        }