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)