フッターでメニューが消える?!GSAPアニメーションの実装方法

なる

学習期間５ヶ月、独立後半年で月収５０万を突破した「なる（@naru000006）」です。

この記事では、フッターでメニューが消えるアニメーションをGSAPを使って簡単に実装する方法を紹介しています。

この記事ではサービスのリンク先にプロモーションを含みます。ご了承ください。

実装すること
解説
自然なアニメーションのポイント
GSAPについて学習したい場合
まとめ

実装すること

今回実装するアニメーションはこちらです。

今回紹介するのは、ユーザーがページのフッターエリアにスクロールした時に、グローバルメニューを非表示にするアニメーションです。

この手法は、ユーザーにページの特定のエリアに焦点を当てさせるための有効な方法となります。

See the Pen フッターでメニューが消える by narukichi06 (@narukichi06) on CodePen.

解説

HTML・CSS
GSAPとは
アニメーションの解説
自然なアニメーションのポイント
GSAPを学習したい場合

HTML・CSS

今回解説するアニメーションのHTMLとCSSはCodepenをご参照ください。

アニメーションの動作が分かりやすいようにセクションを２つ設けている以外は、いたって普通のコードですね。

See the Pen フッターでメニューが消える by narukichi06 (@narukichi06) on CodePen.

GSAPとは

今回は「GSAP（ジーサップ）」というアニメーションのプラグインを使用します。

GSAP（GreenSock Animation Platform）は、ウェブ上でのアニメーションを作成するための強力なJavaScriptライブラリです。HTML要素、SVG、Canvas、WebGLなど、さまざまなメディアタイプのアニメーションを制御するためのツールが含まれています。

このGSAPのすんごいところは、「ScrollTrigger」というスクロールに応じてアニメーションを発火させたり、アニメーションを進行させたりするプラグインがあるということです。

今回はGSAPとGSAPプラグイン「ScrollTrigger」を使います。

GSAPの読み込み

GSAPも他のプラグイン同様CDNがあるので、bodyタグの閉じタグ直前に入れてください。

今回使用したCDNはこちらです。

//GSAP
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>

//ScrollTrigger
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

GSAP公式サイトのCDN一覧はこちらです。

「GSAP３ Install Helper」の「ScrollTrigger」にチェックを入れると自動的にCDNが下に表示されます。

Installation | GSAP | Docs & Learning

GSAPis"frameworkagnostic",thismeansitcanbeusedinReact,Webflow,Wordpress,oranyotherJS/Webframeworks.ThecoreGSAPfileandallthepluginsarejustJavascriptfiles.

GSAPアニメーションの解説

まずは、今回使用するアニメーションのコードを見てみましょう。

//footerのエリアに入るとグローバルメニューが消える
const footer_anime = gsap.timeline({
  scrollTrigger: {
    trigger: ".footer", // アニメーションが始まるトリガーとなる要素（今回は「footer」クラスにスクロールしたとき）
    start: "top bottom", // .footer の上端が .header-nav の下端に達した時点で
    end: "bottom top",   // .footer の下端が viewport の上端に達した時点まで
    once: false,// アニメーションを一度だけ再生するかの設定（falseなので何度も再生可能）
    toggleActions: "play none none reverse",// スクロール位置によって異なるアニメーション動作を指定
    onEnter: () => gsap.fromTo('.header',{autoAlpha:1,y:-20} ,{ autoAlpha: 0, y:0, duration: 0.7 ,ease:'power2.InOut' }), // footer エリアに入ったとき
    onLeaveBack: () => gsap.fromTo('.header', {autoAlpha:1,y:0},{ autoAlpha: 1, y:-20,duration: 0.7 ,ease:'power2.InOut'}) // footer エリアを出たとき
  }
});

アニメーションのポイント①　タイムライン (gsap.timeline)

タイムラインとは、複数のアニメーションを順番に、または同時に再生することができるGSAPの機能です。

１行目でGSAPタイムラインを「footer_anime」という変数に格納することで、他の場所でGSAPを使うときに混合しなくてすみます。

const footer_anime = gsap.timeline

アニメーションのポイント②　スクロールトリガー (scrollTrigger)

ScrollTriggerは、スクロール位置に基づいてアニメーションをトリガーするGSAPのプラグインです。以下のオプションでスクロールトリガーの挙動を定義します。

オプション	説明
trigger	アニメーションの開始や終了を決定する基準となる要素を指定します。
start	アニメーションが開始するスクロールの位置を指定します。”top bottom”は、トリガー要素の上端がビューポートの下端に達した時点を意味します。
end	アニメーションが終了するスクロールの位置を指定します。”bottom top”は、トリガー要素の下端がビューポートの上端に達した時点を意味します。
once	アニメーションが1回だけ再生されるかどうかを指定します。`false`の場合、何度でも再生されます。
toggleActions	スクロールトリガーの各フェーズ（入る、一度通過、戻る、一度戻る）でのアニメーションの動作を指定します。

また、今回使用した「onEnter」と「onLeaveBack」は特定のスクロールの位置でのコールバック関数を指定するものです。このコードでは、フッターエリアに入った時と出た時にグローバルメニューのアニメーションを制御しています。

onEnter:フッターエリアでグローバルメニューが消える動き

「onEnter」で指定したトリガーエリア（この場合は.footerエリア）にスクロールして入ったときに自動的に実行されます。

gsap.fromTo('.header', {autoAlpha:1, y:-20}, {autoAlpha: 0, y:0, duration: 0.7, ease:'power2.InOut'})

「gsap.fromTo」でアニメーションの開始状態と終了状態を指定して、その間のアニメーションを制御します。

「gsap.fromTo」は次の３つの要素により成り立っています。

ターゲット要素: アニメーションを適用する対象となるDOM要素または要素のリスト。
開始状態: アニメーションが開始するときの要素の状態。
終了状態: アニメーションが終了するときの要素の状態。

ターゲット要素

まず、アニメーションを適用するターゲットを指定します。今回はフッターエリアに入ったときのグローバルメニューの動きを制御するので、「.header」を指定します。

開始状態

autoAlpha: 1	要素を完全に表示（`opacity: 1`と`visibility: visible`の両方を意味します）。
y: -20	Y軸（垂直軸）において、元の位置から上に20pxずらして配置。

終了状態

アニメーション終了時に「autoAlpha: 0」で要素を完全に非表示にし、「y: 0」で元の位置にもどします。

yを制御することで、ふわっとした動きのあるアニメーションをつくることができます。

autoAlpha: 0	要素を完全に非表示（`opacity: 0`と`visibility: hidden`の両方を意味します）。
y: 0	Y軸に関して、オフセットを0にリセットし、元の位置に戻します。
duration: 0.7	アニメーションの持続時間を0.7秒
ease: ‘power2.InOut’	アニメーションのイージング関数を指定します。この関数は、アニメーションの速度変化を制御します。この場合は、アニメーションがゆっくり開始し、その後速くなり、再びゆっくりと終わるパターンを示しています。

このアニメーションの結果として、グローバルメニュー（.header）は上に20pxオフセットされた状態からスタートし、0.7秒の間にその位置から元の位置に戻りつつ同時にフェードアウトされます。

フッターエリアから出たときにグローバルメニューがあらわれる「onLeaveBack」では、この逆を行うだけです。