GSAPを使ったWebページのコーディングで、GSAPが思うように動かないときに私自身が経験した問題点を紹介します。
かなり基礎的な話かもしれませんが、つい見落としていたりハマることもあるかと思いますので制作の参考になればと思います。
GSAPが動かない？そもそも読み込みできているか
コーディングをしてみて1度も動いていない場合、まずはGSAPライブラリがきちんと読み込まれているかを確認してください。
ファイルをダウンロードするか、CDNを利用して読み込まれていることを確認します。CDNの場合は以下のように読み込みを行います。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>ローカルにダウンロードしている場合は、もちろんパスが正しいかも確認してくださいね。
いやいや、さすがにそれは大丈夫ですよ！という方は、ついでに自分の書いたスクリプトが、GSAPを読み込んだ場所よりも後で書いているかという確認もしてください。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script>
// 自分のコード
gsap.to(".target", { x:500 });
</script><script>
// 自分のコード
gsap.to(".target", { x:500 });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>初心者にありがちですが、スクリプトの読み込み順は重要です。自分で書いた「gsap.to()」という機能は、gsap.min.jsというファイルに含まれていますから、これを先に読み込んであげなければ、ブラウザとしては「いきなり出てきたgsap.to()ってなんや？？知らない」となるわけです。
私自身もこのようにダメなことは知っているのですが、色々いじっているうちについ順番が狂ってたということもありましたので、念の為チェックです。
WordPressで制作している場合、スクリプトの読み込みを関数で実装していたりするとたまにこの読み込み順の問題に引っかかることがありましたので、確認するだけしてみるとよいかと思います。
F12の開発ツールや、右クリックからの「ページのソースを表示」などで「gsap」をキーワードに検索などして場所を確認すると問題を特定しやすいかと思います。
GSAPが動かない？実は動いているかも！
次は、実は動いていたパターンの例です。
画面を表示したとき、または動かしたい対象が画面に現れた時、すでにアニメーションが完了してしまっていた、というケースです。
例えば次のようなコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
section { height: 100vh; }
.target { width: 100px; height: 100px; background:red; }
</style>
<title>実は動いている例</title>
</head>
<body>
<section>
<h2>SECTION1</h2>
</section>
<section>
<h2>SECTION2</h2>
<div class="target"></div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script>
gsap.to(".target", { x:100 });
</script>
</body>
</html>このページを開くと、アニメーションのターゲットは少し下にスクロールすると登場します。
しかし登場するころには既にアニメーションが終了している。というパターンです。ターゲットを表示させた状態でブラウザを更新すると動きが確認できるかと思います。
このサンプルのようなGSAPの書き方をすると、画面が表示されると同時にアニメーションが開始します。そして繰り返し指定もないので、一見動作していないように見えるということです。
この例はかなりシンプルでわざとらしいのですが、色々と複雑なサイトをコーディングしていてページの表示に時間がかかるようになってくると、画面上で見えてないところでアニメーションが完了してしまっている場合もあります。
目視確認できるころにはアニメーションが完了してしまっており、「あれ？動いてない」となるわけです。
参考までに、次のように繰り返し指定を入れてあげるとアニメーションを繰り返しますので、この問題特定の役立つかと思います。
gsap.to(".target", { x:100, repeat: -1 });動かないのではなく、既にアニメーションが完了していないかという可能性も疑ってみてください。
そもそもアニメーションを止める設定がないか
GSAPでアニメーションを設定するときに、pausedというプロパティがあります。このpausedをtrueに設定しておくと、アニメーションをすぐに一時停止します。
私もハマったことですが、どこからかコードをコピペして動作確認をしたところpausedが指定されていることに気づかずに、あれあれ？となったことがありました。
こんなシンプルなサンプルなら目立ちますが、複雑な動きを作っていると設定値たちの間に埋もれていることもありますので念の為チェックしてみてください。
gsap.to(".target", { x:100 , paused: true});ちなみに、pausedは一旦停止しておいて、後から「play()」などを使って、意図したタイミングで再生したい場合に利用します。つまりこのサンプルの例だけでは全く意味がないコードとなります。
設定値が正しく書かれているかどうか
これも私自身たまにやらかすことですが、例えば「 x: 100 」というように、横方向に100px移動させるという場合はこれで良いのですが、
「 x: “100%” 」というように、パーセントで指定したい場合はダブルクォーテーションかシングルクォーテーションで囲う必要があったりします。
そもそもパーセントで指定したい場合は、xPercentというプロパティを使って「xPercent: 100」というような設定方法が推奨されていたりします。
一方で、「xPercent: “100%”」とするとこれは動かないです。というように、プロパティの値をダブルクォーテーション無しの数値としての設定をするのか、文字的な扱いをするのか。
またこの場合のPは大文字ですよ、などなど。このような小さな構文違いでも「動かない」につながりますので、注意してみてください。
まとめ
GSAPが動かない？というときに私自身がよくやらかしていたミスを紹介させていただきました。
GSAPにはスクロールと連携できるScrollTriggerという超便利な拡張機能も備わっていて、こちらが加わってくると更に「動かない…なんで」が増えてくるかと思います。
ただ、ひとまずGSAP単体で動かないということは、およそ読み込みの問題かプロパティなどの入力ミスがほとんどではないかと思います。
動かないというときはまずめっちゃシンプルなコードで試してみると良いかと思います。最初に紹介したソースレベルならまず動くはずなので、そこを起点に進めていくと効率の良いデバッグができるのではと思います(*^^*)
少しでも開発の参考になれば幸いです。
