はじめに

こんにちは、シャトルです。皆さん、2023年明けましておめでとうございます。それと今年もアド・エータイプをよろしくお願いします。私自身、今年の目標は一日一日を大切に過ごすことです。あと、皆さんの役に立つブログを書くことですね。

さて今回は、「GSAP」を使用したアニメーション制作について解説したいと思います。

最近のWEBサイトはユーザーの利便性や印象などを向上させるため、動きのあるものが増えていますね。今回紹介するGSAPはあんな動きからこんな動きまで色々再現できますので、是非この記事を活用して手軽にアニメーション制作を始めてみましょう。

GSAPとは？ GSAPを使用するメリットって？

GSAPを一言で説明すると、「軽量で多機能かつ直感的で扱いやすい、JavaScriptライブラリ」です。ちなみに、読み方はGSAP(ジーサップ)と読むそうです。

WEB制作でライブラリだとJQueryなどが思い浮かびますが、それより簡単に操作できるので（あくまで個人的な意見ですが）、普段JavaScriptに触れていない方でも気軽に始められるのが良い点だと思います。

実際にGSAPに触れてみよう！

GSAPのインストール

GSAPの導入は非常に簡単です。いくつか方法はありますが、今回はCDNでの導入方法を紹介します。（公式サイトでも紹介されているので、併せてご覧ください。）

・CDNの場合

CDNの場合は、以下をHTMLファイルに埋め込みましょう。これでGSAPを使用する準備が整います。

※公開時点（2022年12月）ではバージョンが3.11.3となっていますので注意してご利用ください。最新バージョンは公式サイトで確認できます

基本的な記述方法

インストールを終えたら、早速記述してみましょう。以下がGSAPの基本的な記述文です。

第1引数（ ”.box” ）に動かす対象を指定し、第2引数（ { x: 300 duration: 2 } ）にプロパティと設定値を指定します。 設定値というのは、プロパティにカスタマイズを加えることができるものを指します。ここでは、時間（duration）を指定していますが、この他にも動きを遅延させたり（delay）、繰り返したり（repeat）することもできます。ちなみに、上記のコードでは「2秒間で水平方向（左から右）に300px移動する」という指示になります。

また今回は、gsap.to()を取り上げましたが、この他にも様々なメソッドが用意されています。以下に基本的なものを記載しますので、参考までにどうぞ。

このように、CSSで使っていたプロパティを直感的に使用できて、なおかつその動きを簡単にカスタマイズすることができるのは制作側にとってありがたいものですね。

GSAPの基本編（staggerプロパティ）

staggerプロパティを使用すると、対象の要素間のアニメーションに遅延をもたせて、バラバラな動きをつけることができます。以下をご覧ください。

GSAPの応用編1（タイムライン機能）

staggerプロパティでは、単一の対象限定でのアニメーションでしたが、タイムラインを使用すると、複数の対象に対し、時系列でアニメーションを付与することが可能になります。以下をご覧ください。

以上のように、タイムライン機能は複雑な演出を制作するのにとても役立ちますので、是非ご活用ください。

GSAPの応用編2（ScrollTriggerプラグイン）

staggerプロパティやタイムライン機能などを使った複雑な動きを画面のスクロールに合わせて実装したいという方は、ScrollTriggerプラグインがオススメです。ScrollTriggerを使用する場合、以下を読み込む必要があります。（詳しくは、公式サイトをご覧ください。）

また、jsファイルに以下を埋め込んでから記述を始めてください。

そして、以下がScrollTriggerを使用したサンプルとなります。（アニメーションを再確認したい方は、「Rerun」ボタンを押してください。）ScrollTriggerでは、アニメーションのスタート位置指定やアニメーション中の要素固定なども直感的に指定できます。

おわりに

いかがでしたでしょうか。今回はGSAPの初歩的な部分に触れましたが、この他にも実装できることはたくさんありますので、公式サイトや他のサイト、ブログ等を参考に色々試して、楽しんでみてください。

また、このようなアニメーションを採用したWebサイトを提案して欲しいという方は勿論、GSAPについての質問でも構いませんのでお気軽にご相談ください。