GSAP Drawer Anime

02 上からスライドイン&メニューを下からニュッと表示

const pattern2 = () => {
  gsap.set(drawer, {
    yPercent: -100,
    visibility: "hidden",
    ease: Power2.easeInOut,
  });
  gsap.set(".js-nav-item a", { yPercent: 100 });
  let tl2 = gsap.timeline();
  openButton.addEventListener("click", () => {
    if (!tl2.reversed()) {
      tl2
        .to(drawer, {
          visibility: "visible",
          yPercent: 0,
        })
        .to(".js-nav-item a", {
          stagger: { amount: 0.6 },
          yPercent: 0,
        });
    } else {
      tl2.play();
    }
  });
  closeButton.addEventListener("click", () => {
    tl2.reverse();
  });
};

ドロワーを開いている間、メインコンテンツはスクロールしないようにしてあります。

ドロワーのアニメーションはすべてJavaScriptファイル内(GSAP)で記述しています。(初期設定や見た目はCSS)