『簡単・安定・安心』私がWEB用アニメーションにGSAPを使う理由

2023年6月5日

webサイトにアニメーションをつける方法にはいくつかありますが、私はGSAPを使うことが多いです。詳細な理由は後述しますが、ともかく便利だということです。

記述が直感的で簡単なので、コツさえ掴めば次のようなアニメーションもすぐできてしまいます。STARTボタンをクリックすると花火が打ちあがります。

このアニメーションは、20個のドットを同時に打ち上げて色や形状を変化させながら放射状に広げる、という動作をしています。透明度・位置・形状・色を20個同時に制御しているわけです。CSSではドットの初期サイズ・位置指定と透明化をしておくだけで、あとは全てJS内のGSAP記述だけで変化させることができます。

花火のように若干複雑な場合は、どのタイミングでどう形を変えて色も変化させるのかを見映えを確認しながらいろいろ試行錯誤と調整が必要ですが、動きそのものはすぐ実装できます。なので、WEBページ内でよくある画像をフワッとフェイドインさせるとか、サッと背景色をスライドさせながら切り替える、なんてことは朝飯前です。

以上のように『簡単に実装できる』だけでも、GSAPを使用する理由としては十分だと思いますが、実は私がGSAPを使う一番の理由ではありません。本記事では私がGSAPを使う理由について詳細に紹介していきます。

GSAPとは

アニメーションに特化したJSライブラリです。公式サイトはこちらです。

Javascriptの中に簡単な記述だけで複数の対象要素を時間的に制御しながら動かすことが可能です。フェイドイン・アウトや上下左右のスライドはもちろん、大きさ、色、透明度なども変化可能です。

このウェブチルサイトの過去の記事でも、ワードプレスでGSAPを使ってローダーを実装する方法を紹介しています。

この記事で作成したデモサイトがこちら。

この記事で作成したデモサイトがこちら。

GSAPを使う理由

私がGSAPを愛用する主な理由は次の通りです。

1. 簡単な記述でアニメーションが可能。
2. CSSを気にすることなく、JSファイルだけでアニメーションが完結する
3. 安定動作する（CSSアニメーションはiphoneのChromeで動作不安定の問題あり）
4. 世界的にみるとwebサイトで一番よく使われているので安心

①②は冒頭説明した通りで、実際に使ってみるとわかりますが、もはや生のJSやjQueryには戻れないレベルです。コーディングで無駄な苦労が激減するので、アニメーションの動きそのものの完成度アップに集中することができます。最近ではスライダーもswiper.jsなどを使わずにGSAPで自作するようになりました。よくあるスライダーと違って、縦・横・斜めなど自由にスライド方向を設定できるのが魅力だからです。

③と④については以下に補足説明をしていきます。実は私がGSAPを使うようになった一番の理由が③の安定動作なのです。

CSSのtransitionプロパティを使ったアニメーションは不安定

なぜかあまり問題視されていないことですが、CSSのtransitionプロパティを使ったアニメーションは、iOSでしばしばうまく動かない、という報告があります（Chromeのバグとして改善要望があがっています）。

https://bugs.chromium.org/p/chromium/issues/detail?id=1249723

実際私が別記事で紹介しているアニメーション用プラグインBlocks Animationでもiphoneのchromeブラウザではうまく動作しません。フェイドインやスライドインを設定していても、これらのエフェクトなしに唐突に表示されてしまいます。

ほかにもアニメーション用で有名な aos.js やスライダー用で有名な swiper.js もiphoneのchromeではうまく動かないなど例を挙げればキリがないほどです（これらのデモサイトを実際にiphoneのchromeとsafariで比較してみればわかります。chromeだとエフェクトなしに唐突に表示されます。）。ほかにもamazonでベストセラーになっているアニメーション用の書籍のデモサイトも動かないですね。

なぜこういったことがまかり通っているのか不思議です。まあ、iphoneでもsafariなら問題なく動くので問題視されていないのかもしれませんが。

でもせっかく実装したのにうまく動かない・・・というのは悲しいですよね。だから私はGSAPを使うことにしているのです。ちなみに、本ブログの記事一覧の各記事のタイトルがスクロールしますが、これもGSAPを使っています。

海外のWEBサイトではGSAPが一番よく使われている

こちらの記事によれば、2022年にセレクト紹介されているWEBサイトにおいて、日本では相変わらずjQueryが一番利用率が高いのですが、海外ではGSAPがjQueryを上回ったとのことです。（サンプリング数はさほど多くないので、参考情報ではあります）

個人的に調査をしていたら面白い点を見つけました。

GSAP が海外サイトにおいて、使用率が jQuery を上回ったという点です。

GSAP はアニメーション用の JavaScript ライブラリです。あくまで jQuery、React、Vue だけの調査だったので、他のライブラリは無視していたのですが、あまりにも GSAP が登場していたので、GSAP も追加で集計しました。

GSAP 国内・海外 利用率:
国内 47/137 (34.3%)
海外 80/172 (46.5%)

（・・・途中略・・・）

競合ライブラリは anime.js、CreateJS あたりで、それらが使われているケースもたまに見られましたが、ほぼ GSAP という感じでした。この理由は GitHub のレポジトリの活発度的に GSAP 以外はほぼ死んでいるという点があるかと思います。この記事執筆時点の GitHub での anime.js の最新リリースは 2 年前、CreateJS の最新リリースは 5 年前、GSAP は 10 時間前でした。ほぼ一強と言えると思います。

https://feb19.jp/blog/20220904_jqueryreactvue

GSAPは常に更新され新しく便利になり続けており、そして世界でもどんどん普及が進んでいる・・・ということは、今後GSAPを継続利用できる安心材料なのだと思います。

jQueryは衰退する？

おまけとして、こちらの記事を紹介しておきます。

Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性

今後ブラウザに新しく追加されていくCSSの機能によって、jQueryが誤動作していく可能性について言及されています。脱jQueryが今後加速していくかもしれませんね。

GSAPを使用するときはライセンスにご注意

このように便利なGSAPですが、ライセンスには注意が必要です。

よくあるMITやGPLではなくGSAP独自のライセンスとなっているので、公式ページのライセンスを読んで、自分の使い方に有料ライセンスが必要でないか確認するようにしましょう。

会社のブランディング用ホームページやブログなど通常のWEBサイトなら無料のスタンダードライセンスの範囲で使用可能ですが、使用方法によっては有料のビジネスライセンスが必要となります。

私が書いたこちらの記事も参考にしてください。

また、ビジネスライセンスが不要な場合でも、有料プランに加入することで、無料では使用できないプラグインやサポートを受けることが可能です。

https://greensock.com/club/

まとめ

最後にもう一度、私がGSAPを使う理由をまとめておきます。

1. 簡単な記述でアニメーションが可能。
2. CSSを気にすることなく、JSファイルだけでアニメーションが完結する
3. 安定動作する（CSSアニメーションはiphoneのChromeで動作不安定の問題あり）
4. 世界的にみるとwebサイトで一番よく使われているので安心

理由③が私がGSAPを使うようになった一番の理由ではありますが、その便利さに慣れてからは①②も大きな理由です。そして④は、私と同じように感じている方が世界中にいる、ということでしょう。