GSAPスクロールアニメーション｜ScrollTriggerを使って指定した要素をフェードインさせる。

導入方法(CDN)

GSAPを導入したいHTMLファイルの</body>の前に下記コードを記入。

公式のDocsページ

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"</script>

本体ライブラリとScrollTriggerプラグインを追加している💡

実際にアニメーション内容を記入する、JavaScriptファイルを作成し読み込ませる。今回はcommon.jsで作成。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"</script>
<script src="js/common.js"></script>

🎉【完成コード】設定した場所までスクロールしたら下からフェードイン

feadInというクラス名をつけた要素にアニメーションを設定し、アニメーションの発火は.feadIn-containerというクラス名をつけた要素としています。

gsap.registerPlugin(ScrollTrigger);

gsap.set(".feadIn", { opacity: 0, y: 50 }); // 初期値を設定

gsap.to(".feadIn", {
  opacity: 1,
  y: 0,
  duration: 1,
  ease: "power2.out",
  scrollTrigger: {
    trigger: ".feadIn-container",
    start: "top 40%", // .feadIn-container の top が、ビューポートの40%の位置に来たら開始
    toggleActions: "play none none none", // アニメーションのトリガー挙動
    markers: true,
  },
});

上記のfeadIn-container（start）がビューポート位置(scroller-start)の位置に来たら、feadIn要素のアニメーション開始。

🎉【 解説 】大事な部分だけのカンタン解説

メイン機能のみのカンタン解説。
公式にはさらに詳細設定できる項目がたくさんあり⭐️

チートシート｜gsap.com/cheatsheet

①gsap.set｜初期状態を設定

アニメーションさせる前の状態を設定する。CSS Stylesheetであらかじめアニメーション前の状態に設定している場合は設定はしなくても良い。〇〇の部分にアニメーションをさせたい要素のクラス名を設定。

gsap.set(".〇〇", { 初期状態のCSS });

②gsap.to()｜アニメーション詳細を設定

どの要素をどのようにアニメーションさせるか詳細を設定。（opacityやy置、easeやdurationなど）

gsap.to(".〇〇", {
//ここでアニメーション詳細を設定

〇〇にアニメーションをさせたい要素のクラス名を設定。

③scrollTrigger : {}｜アニメーションの発火の詳細を設定

アニメーションの発火となる要素を決める。
いつどのタイミングでアニメーションを発火させるかなどの詳細設定が可能。

scrollTrigger：{ trigger

trigger:　".〇〇",　← triggerにしたいコンテナまたは要素のクラス名を設定。
ここに設定した要素をアニメーション発火のトリガーにできる。

scrollTrigger：{ start

設定したアニメーション発火のtrigger:".〇〇",　要素のどの部分が、ビューポートのどの位置にきたらアニメーションをstartさせるかを設定する。endもあり。

start:　" trigger要素の位置"　,　ビューポートの位置 ",

例：start: "top 80%",にすると、設定したtrigger:".〇〇",要素のtopがビューポート80%の位置にきたらアニメーション開始。

scrollTrigger：{ toggleActions

ScrollTrigger におけるスクロールイベントの挙動（トリガーに入った・出た時の動作）を細かく制御するためのオプション。
playもしくはnoneで設定可能。

それぞれ下記の順番で設定。

toggleActions: "onEnter onLeave onEnterBack onLeaveBack"

💡 よく使う組み合わせ例

🧠【完成コード】フェードインアニメーションを複数の要素に設定。

複数にフェードインアニメーションを設定したい時。
.fade-in クラス自体をトリガーとして、.fade-in クラスをもつすべての要素にアニメーションを設定。

forEachを使って、ループ処理で一括設定する。

gsap.registerPlugin(ScrollTrigger);


gsap.utils.toArray(".fade-in").forEach((el) => {
  gsap.from(el, {
    opacity: 0,
    y: 50,
    duration: 1,
    scrollTrigger: {
      trigger: el,
      start: "top 80%",
      toggleActions: "play none none none",
      markers: true, 
    },
  });
});

• gsap.utils.toArray() で .fade-in 要素を全部取得
• el はそれぞれのtrigger要素
• trigger: el とし、それぞれの要素が自分自身をトリガーにする

📝一つずつ要素のアニメーションをずらす

すこしタイミングをずらしてstaggerっぽくフェードインさせる。

gsap.utils.toArray(".feadUp").forEach((el, i) => {
  gsap.set(el, { opacity: 0, y: 50 });

  gsap.to(el, {
    opacity: 1,
    y: 0,
    duration: 1,
    delay: i * 0.2, // 手動でstaggerっぽくする
    ease: "power2.out",
    scrollTrigger: {
      trigger: el,
      start: "top 80%",
      toggleActions: "play none none none",
      markers: true,
    },
  });
});