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)