GSAP Drawer Anime

01 右からスライドイン&メニューを左からニュッと表示

const pattern1 = () => {
  let tl1 = gsap.timeline();
  gsap.set(drawer, {
    xPercent: 100,
    visibility: "hidden",
    ease: Power2.easeInOut,
  });
  openButton.addEventListener("click", () => {
    if (!tl1.reversed()) {
      tl1.to(drawer, {
          visibility: "visible",
          xPercent: 0,
          duration: 0.3,
        }
      )
      .from(".js-nav-item a", {
        stagger: { amount: 0.4 },
        xPercent: -100,
      });
    } else {
      tl1.play();
    }
  });
  closeButton.addEventListener("click", () => {
    tl1.reverse();
  });
};

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

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