javascript gsap reverse

index.html

 <div id="header">
        <h1>v</h1>
        <div class="menu">
        </div>
    </div>
    <div class="menu-container">
        <ul>
            <li><a>Home</a></li>
            <li><a>about</a></li>
            <li><a>services</a></li>
            <li><a>contact</a></li>
        </ul>
   </div>

style.css

:root{
    --bg: #f7f7f7;
    --link-color:#e2e2dc;
    --overlay-bg: #222;
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

html, body{
    width:100vw;
    min-height:100vh;
    overflow:hidden;
    background:var(--bg);
    position: relative;
}

li{
    list-style: none;
}

h1{
    text-transform: uppercase;
    font-size:20px;
}

#header{
    position: fixed;
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: space-between;
    padding:0 30px;
    align-items: center;
    z-index: 1;
}

#header .menu{
    border:1px solid var(--overlay-bg);
    padding:2px 8px;
    border-radius:40px;
    font-size: 13px;
    cursor: pointer;
}


#header .menu:before{
    content:'menu'
}

.menu-container{
    width: 100%;
    position:fixed;
    height: 100%;
    background:var(--overlay-bg);
    top:0;
    left:0;
    display: flex;
    align-items: center;
    justify-content:center;
}

.menu-container ul {
    display: flex;
    align-items:center;
    justify-content:center;    
    width: 100%;
    flex-direction: column;
    gap:20px;
}

.menu-container ul li{
    height: 9vw;
    overflow: hidden;
    width: auto;
}

.menu-container ul li a{
    color:#fff;
    text-transform:uppercase;
    font-size: 9vw;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

script.js

const menu = document.querySelector('.menu');
const tl = gsap.timeline({ paused: true, reversed: true });
gsap.set('.menu-container', { visibility:'hidden', y:'-100vh' });
gsap.set('.menu-container li a', { y:'30vh' });

menu.addEventListener('click', () => {
    if (tl.reversed()) {
        tl.play();
    } else {
        tl.reverse();
    }
});


tl.to('.menu-container',0.8, {
    visibility: 'visible',
    y:0,
    ease: Power2.easeIn,
});

tl.to('h1',0.8,{
    color:'#fff',
    ease: Power1.easeIn,
},"<")

tl.to('.menu',0.8,{
    border:'1px solid #fff',
    color:"#fff"
},"<")

tl.to('.menu-container li a',0.8, {
    y:0,
    ease: Power4.inOut,
    stagger:0.1
});