<h2 id="hda758b60ea">導入方法(CDN)</h2><p>GSAPを導入したいHTMLファイルの&lt;/body&gt;の前に下記コードを記入。</p><p><a href="https://gsap.com/docs/v3/" target="_blank" rel="noopener noreferrer">公式のDocsページ</a></p><pre><code class="language-javascript">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js&quot;&lt;/script&gt;
</code></pre><p>本体ライブラリとScrollTriggerプラグインを追加している💡</p><table><tbody><tr><th colspan="1" rowspan="1"><p>CDN</p></th><th colspan="1" rowspan="1"><p>内容</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>gsap.min.js</code></p></td><td colspan="1" rowspan="1"><p>GSAPの本体ライブラリ（アニメーションの基礎）</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>ScrollTrigger.min.js</code></p></td><td colspan="1" rowspan="1"><p>要素のスクロール位置に応じたアニメーション制御</p></td></tr></tbody></table><p>実際にアニメーション内容を記入する、JavaScriptファイルを作成し読み込ませる。今回はcommon.jsで作成。</p><pre><code class="language-javascript">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js&quot;&lt;/script&gt;
&lt;script src=&quot;js/common.js&quot;&gt;&lt;/script&gt;</code></pre><h2 id="h45a528422f">🎉【完成コード】設定した場所までスクロールしたら下からフェードイン</h2><p>feadInというクラス名をつけた要素にアニメーションを設定し、アニメーションの発火は.feadIn-containerというクラス名をつけた要素としています。</p><pre><code class="language-javascript">gsap.registerPlugin(ScrollTrigger);

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

gsap.to(&quot;.feadIn&quot;, {
  opacity: 1,
  y: 0,
  duration: 1,
  ease: &quot;power2.out&quot;,
  scrollTrigger: {
    trigger: &quot;.feadIn-container&quot;,
    start: &quot;top 40%&quot;, // .feadIn-container の top が、ビューポートの40%の位置に来たら開始
    toggleActions: &quot;play none none none&quot;, // アニメーションのトリガー挙動
    markers: true,
  },
});</code></pre><figure><img src="https://images.microcms-assets.io/assets/8bac7d974bcd43e6a673ba966786d5c9/baba82755dd940998ceaa6a90d08193e/feadInImg.png" alt="GSAP参考画像" width="1073" height="590"></figure><p>上記のfeadIn-container（start）がビューポート位置(scroller-start)の位置に来たら、feadIn要素のアニメーション開始。</p><h2 id="h89be3c8553">🎉【 解説 】大事な部分だけのカンタン解説</h2><p>メイン機能のみのカンタン解説。<br>公式にはさらに詳細設定できる項目がたくさんあり⭐️</p><p><a href="https://gsap.com/cheatsheet" target="_blank" rel="noopener noreferrer nofollow">チートシート｜gsap.com/cheatsheet</a></p><hr><h2 id="hb2eb891176">①gsap.set｜初期状態を設定</h2><p>アニメーションさせる前の状態を設定する。CSS Stylesheetであらかじめアニメーション前の状態に設定している場合は設定はしなくても良い。〇〇の部分にアニメーションをさせたい要素のクラス名を設定。</p><p>gsap.set(&quot;.〇〇&quot;, { 初期状態のCSS });</p><hr><h2 id="h6475b37808">②gsap.to()｜アニメーション詳細を設定</h2><p>どの要素をどのようにアニメーションさせるか詳細を設定。（opacityやy置、easeやdurationなど）</p><p>gsap.to(&quot;.〇〇&quot;, {<br>//ここでアニメーション詳細を設定</p><p>〇〇にアニメーションをさせたい要素のクラス名を設定。</p><hr><h2 id="h84301d5f50">③scrollTrigger : {}｜アニメーションの発火の詳細を設定</h2><p>アニメーションの発火となる要素を決める。<br>いつどのタイミングでアニメーションを発火させるかなどの詳細設定が可能。</p><h3 id="h04a728d120">scrollTrigger：{ trigger</h3><p>trigger:　&quot;.〇〇&quot;,　← triggerにしたいコンテナまたは要素のクラス名を設定。<br>ここに設定した要素をアニメーション発火のトリガーにできる。</p><h3 id="h2d5be69994">scrollTrigger：{ start</h3><p>設定したアニメーション発火のtrigger:&quot;.〇〇&quot;,　要素のどの部分が、ビューポートのどの位置にきたらアニメーションをstartさせるかを設定する。endもあり。</p><p>start:　&quot; trigger<span style="color: #000000">要素の位置</span>&quot;　,　ビューポートの位置 &quot;,</p><p>例：<code>start: &quot;top 80%&quot;,</code>にすると、設定したtrigger:&quot;.〇〇&quot;,要素のtopがビューポート80%の位置にきたらアニメーション開始。</p><h3 id="h9c29dbf06b">scrollTrigger：{ toggleActions</h3><p>ScrollTrigger におけるスクロールイベントの挙動（トリガーに入った・出た時の動作）を細かく制御するためのオプション。<br>playもしくはnoneで設定可能。</p><p>それぞれ下記の順番で設定。</p><p><strong>toggleActions: &quot;<span style="color: #67d639">onEnter</span> <span style="color: #d5214c">onLeave</span> <span style="color: #3285eb">onEnterBack</span> <span style="color: #d517f0">onLeaveBack</span>&quot;</strong></p><table><tbody><tr><th colspan="1" rowspan="1"><p>項目</p></th><th colspan="1" rowspan="1"><p>発火タイミング</p></th><th colspan="1" rowspan="1"><p>設定</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong><span style="color: #67d639">onEnter</span></strong></p></td><td colspan="1" rowspan="1"><p>トリガー要素がビューポートに <strong>入った時</strong></p></td><td colspan="1" rowspan="1"><p><code>play</code>or<code>none</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong><span style="color: #d5214c">onLeave</span></strong></p></td><td colspan="1" rowspan="1"><p>トリガー要素がビューポートから <strong>出た時</strong></p></td><td colspan="1" rowspan="1"><p><code>play</code>or<code>none</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong><span style="color: #3285eb">onEnterBack</span></strong></p></td><td colspan="1" rowspan="1"><p>戻るスクロールで再び <strong>入った時</strong></p></td><td colspan="1" rowspan="1"><p><code>play</code>or<code>none</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong><span style="color: #d517f0">onLeaveBack</span></strong></p></td><td colspan="1" rowspan="1"><p>戻るスクロールで <strong>出た時</strong></p></td><td colspan="1" rowspan="1"><p><code>play</code>or<code>none</code></p></td></tr></tbody></table><p>💡 <strong>よく使う組み合わせ例</strong></p><table><tbody><tr><th colspan="1" rowspan="1"><p>記述</p></th><th colspan="1" rowspan="1"><p>説明</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>&quot;play none none none&quot;</code></p></td><td colspan="1" rowspan="1"><p>一度だけアニメーションさせたい場合に最適（入ったときだけ再生）</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>&quot;play reverse play reverse&quot;</code></p></td><td colspan="1" rowspan="1"><p>入ると再生、出ると逆再生（往復アニメーション）</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>&quot;restart pause resume pause&quot;</code></p></td><td colspan="1" rowspan="1"><p>再入場時に再開など、状態維持しつつ動かしたいとき</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>&quot;play reset play reset&quot;</code></p></td><td colspan="1" rowspan="1"><p>入るたびに最初から再生し直す</p></td></tr></tbody></table><p></p><h2 id="h0e837fc56c">🧠【完成コード】フェードインアニメーションを複数の要素に設定。</h2><p>複数にフェードインアニメーションを設定したい時。<br>.fade-in クラス自体をトリガーとして、.fade-in クラスをもつすべての要素にアニメーションを設定。</p><p>forEachを使って、ループ処理で一括設定する。</p><pre><code class="language-javascript">gsap.registerPlugin(ScrollTrigger);


gsap.utils.toArray(&quot;.fade-in&quot;).forEach((el) =&gt; {
  gsap.from(el, {
    opacity: 0,
    y: 50,
    duration: 1,
    scrollTrigger: {
      trigger: el,
      start: &quot;top 80%&quot;,
      toggleActions: &quot;play none none none&quot;,
      markers: true, 
    },
  });
});
</code></pre><ul><li>gsap.utils.toArray() で .fade-in 要素を全部取得</li><li>el はそれぞれのtrigger要素</li><li>trigger: el とし、それぞれの要素が自分自身をトリガーにする</li></ul><h3 id="ha81ddca65a">📝一つずつ要素のアニメーションをずらす</h3><p>すこしタイミングをずらしてstaggerっぽくフェードインさせる。</p><pre><code class="language-javascript">gsap.utils.toArray(&quot;.feadUp&quot;).forEach((el, i) =&gt; {
  gsap.set(el, { opacity: 0, y: 50 });

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

GSAPのScrollTriggerの使い方解説。個別の設定や一括設定方法も。

GSAP

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