GSAPが動かない原因や対処法について解説

この記事では「GSAPが動かない原因や対処方法」について解説します。GSAPはWebサイトにアニメーションを実装することができるJavaScript系のライブラリです。

アニメーションに便利なGSAPですが、記述を間違えると動かないことがあるので、今回は動かなくなる原因やその対処方法について解説していきます。

なお、GSAPの導入方法や基本的な使い方については、以下の記事をご覧ください。

GSAPが動かないときの対処法

GSAPが動かない場合は以下の理由が考えられます。

• GSAPのCDNファイル、もしくはダウンロードしたファイルが読み込まれていない
• ファイルの読み込み順が逆になっている
• GSAPの記述ミス

GSAPのCDNファイル、もしくはダウンロードしたファイルが読み込まれていない

GSAPのCDN、もしくはダウンロードしたファイルを読み込んでいないと、GSAPは動作しません。また、パスの記述が間違っていても同様に動作しません。

以下のようにGSAPを読み込む必要があります。

<!-- GSAP CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

また、ScrollTriggerなどGSAPの拡張プラグインを使う場合は以下のように、別途読み込みが必要になります。

<!-- ScrollTrigger CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

  GSAPが動かない場合は、これらのファイルが読み込まれているか確認しましょう。

ファイルの読み込み順が逆になっている

GSAPのScrollTriggerなど拡張プラグインを使用する場合、読み込み順に注意しましょう。

以下の場合、ScrollTriggerを「先に」読み込んでからGSAPを読み込んでいるので、ScrollTriggerは動きません。

<!-- ScrollTrigger CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

<!-- GSAP CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

この場合、以下のようにGSAPを先に読み込ませてから、拡張プラグインを読み込ませるようにしましょう。

<!-- GSAP CDN を先に読み込ませる-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<!-- ScrollTrigger CDN を後から読み込ませる-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

また、GSAPの記述をするmain.jsのようなJavaScriptファイルを読み込む場合も、読み込み順に注意しましょう。

以下の場合、main.jsを先に読み込んでからGSAPを読み込んでいるので、GSAPは動作しません。

<!-- GSAPの記述をするファイル-->
<script src="main.js"></script>

<!-- GSAP CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<!-- ScrollTrigger CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

以下のようにmain.jsを最後に読み込むように書き換えましょう。

<!-- GSAP CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<!-- ScrollTrigger CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

<!-- main.jsを最後に読み込む-->
<script src="main.js" defer></script>

また、headタグにGSAPの設定が記述されているファイルを読み込む場合は、「defer属性」を付与しましょう。

defer属性とは、JavaScriptファイルの読み込みがHTMLファイル解析と並行で行われ、HTMLファイル読み込み完了後にJavaScriptファイルの実行が開始されます。

GSAPの記述ミス

GSAPの設定で、記述ミスがあると動作しません。

例えば、以下のような理由が考えられます。

• gsapのクラス名の記述間違い
• プロパティ名の記述間違い
• プロパティを追記した場合の「,（カンマ）区切り」忘れ
• プロパティの値の記述ミス
• gsapの設定の記述ミス

GSAPの記述で例えばgsap.to～やgsap.fromTo～などに記述するクラス名が違うと動作しません。

gsap.to('.box', { //アニメーションしたい要素のクラス名が違うと動かない
  x: 100,
  duration: 3
});

また、GSAPのプロパティ名の記述が間違っていると同様にGSAPは動きません。

プロパティを追記する場合、「,（カンマ）」で区切ることを忘れないようにしましょう。同様に、プロパティの値に適切な記述をしていない場合でも、GSAPが動作しないことがあります。

gsap.to('.box', {
 // プロパティを記述する箇所
  x: 100, // プロパティを追記する場合は「,」で区切る
  duration: 3
});

さらにGSAPのプログラムの記述ミスがあっても同様に動作しません。これは、GSAPに限らずJavaScriptのプログラムにミスがあった場合、処理が動作しないのと同じです。

GSAPが動かない原因、意外とハマりやすいポイント

GSAPで使えるものでも、GSAPのバージョンによっては動かない場合があります。

例えば、matchMedia()というメソッドは、画面サイズに応じて異なるアニメーションを実装することができますが、使えるバージョンは「3.11.0」以降のものです。

仮に3.11.0以前のGSAPのバージョンを使用していて、matchMedia()をコード内に使用すると動作しません。

この場合、3.11.0以降のバージョン、もしくは最新のバージョンを使用すればmatchMedia()を使用することができます。

このように、GSAPで使用するバージョンによって使えるもの、使えないものがあるのでGSAPのバージョンを確認してみましょう。

まとめ

GSAPが動かない原因と対処法について解説しました。GSAPが動かないときは、落ち着いて原因を特定し対処しましょう。

また、インターネットで調べれば、同じようなエラーで悩んで解決した記事を見つけることができるので、それらの記事を参考にするといいでしょう。

GSAPで本格的な学習をするためには10日間で学べるこちらの講座がおすすめです！

【たった"10日間"でWEBアニメーション実装スキル習得】GSAPマスター講座

今すぐ学習をはじめる＞＞