【GSAP】ホバーしたときに入れ替わるように下からテキストを表示させる方法【デモ付き】

<main class="container">
    <ul class="lists">
        <li class="list">
            <a class="js-splitText is-active" href="./">ホーム</a>
        </li>
        <li class="list">
            <a class="js-splitText" href="./">お知らせ</a>
        </li>
        <li class="list">
            <a class="js-splitText" href="./">商品情報</a>
        </li>
        <li class="list">
            <a class="js-splitText" href="./">ヒストリー</a>
        </li>
        <li class="list">
            <a class="js-splitText" href="./">ご予約</a>
        </li>
    </ul>
</main>

<li class="list">
  <a class="js-splitText is-active" href="./">ホーム</a>
  <a class="js-splitText is-active" href="./">ホーム</a>
</li>

<li class="list">
  <a class="js-splitText is-active" href="./">ホーム</a>
</li>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
.container{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
}
/*ここまでは見た目を整えるもの*/
.lists{
    display: flex;
    align-items: center;
}
.list{
    font-size: 18px;
    font-family: 'Noto Sans JP', sans-serif;
    color: white;
}
.list a{
    display: block;
    padding: 0 12px;
    overflow: hidden;/*はみ出た要素を隠す*/
    letter-spacing: .1em;/*文字間を広げて余裕のある感じに*/
}
.list a.is-active{
    color: red;
}
.list a:hover span{
    color: red;
}
.list a.is-active{
    cursor: initial;
}
/* display:flexとalign-items:centerは中身の高さに合わせるために記述*/
.text-wrap{
    position: relative;
    display: flex;
    align-items: center;
}
.after{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}
.before{
    display: flex;
    align-items: center;
}
.before span,
.after span{
    line-height: 1.1;
    transition: color .3s ease-out;/*ease-outで余裕のある動きに*/
}
.after span{
    transform: translateY(100%);/*予め下から出現するテキストを一文字分下に配置しておく*/
}

/* spanタグに分割 */
let splitTarget = document.querySelectorAll('.js-splitText');//ターゲットとなる要素を全取得
splitTarget.forEach((target) => {// target = ターゲット
    if(!target.classList.contains('is-active')){//ターゲットが'is-active'クラスを持っていない場合
        newText = '';//生成する要素を格納するための変数
        spanText = target.innerHTML;//ターゲットの中身を取得
        spanText.split('').forEach((char) => {// char = character 文字
            newText += '<span>' + char + '</span>';//一文字ずつspanタグで囲む
        });
        newTextBefore = "<div class='before'>"+newText+"</div>";//beforeクラスをつけた要素を生成
        newTextAfter = "<div class='after'>"+newText+"</div>";//afterクラスをつけた要素を生成
        newText = "<span class='text-wrap'>"+newTextBefore + newTextAfter+"</span>";//before after両要素を囲む要素生成
        target.innerHTML = newText;//ターゲットに生成した要素を挿入
    }
});

/* ターゲットにホバーした時の動き */
splitTarget.forEach((target)=>{
    if(!target.classList.contains('is-active')){//ターゲットが'is-active'クラスを持っていない場合
        let beforeSpan = target.querySelector('.before').querySelectorAll('span');//beforeの中にあるspanタグを全取得
        let afterSpan = target.querySelector('.after').querySelectorAll('span');//afterの中にあるspanタグを全取得
        target.addEventListener('mouseenter',()=>{//ホバーしたとき
            gsap.to(beforeSpan,{y:'-100%',stagger:.03,ease:"power2.out"})//0.03秒おきに各spanタグをy軸上に移動
            gsap.to(afterSpan,{y:'0%',stagger:.03,ease:"power2.out"})
        })
        target.addEventListener('mouseleave',()=>{//ホバーが外れたとき
            gsap.to(beforeSpan,{y:'0%',stagger:.03,ease:"power2.out"})
            gsap.to(afterSpan,{y:'100%',stagger:.03,ease:"power2.out"})
        })
    }
})