gsap-10메뉴 축소 효과 (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>

#parallax__nav li a {
            display: inline-block;
            width: 80px; 
            height: 30px;
            padding: 5px;
            text-align: center;
            line-height: 30px;
            transition: all 0.3s;
        }
        #parallax__nav li a.active {
            background: #fff;
            color: #000;
            border-radius: 30px;
        }
        #parallax__nav.is-active li a {
            width: 30px; 
        }

ScrollTrigger.create({
          start:"top -80",
          end: 99999,
          toggleClass:{
            className:"is-active",
            targets: "#parallax__nav"
          }
        })