紙ものデザイナーからwebデザイナーになったMariettiです！
今回は入社して初めての中規模案件（ブランドサイト）にてGSAPを使って実装を試みたので、備忘録としてやったこと＋αをまとめていこうと思います！
GSAPとは
GSAPとは、アニメーションを気軽・簡単に実装できるアニメーション特化のJavaScriptのライブラリです。
高機能でプラグインも豊富に用意されているようです！
私が初めて使用した際はスクロールアニメーションの実装のみだったのと、プラグインを1種類しか使用しなかったので他も気になるところです👀
導入方法
公式から「Get GSAP」します！
https://gsap.com/
ダウンロードorCDN経由での読み込みができます。
CDNの場合はこちら。適宜バージョンを確認し使用してください。
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
また、プラグインもインストールヘルパーから導入できます。
これだけの種類のプラグインがフリーで使えるのは強いですね！
Flip、ScrollTrigger、Observer、ScrollTo、Draggable、MotionPath、Easel、Pixi、Text
ダウンロードで導入する場合は、JavaScriptファイルで必要なモジュールをインポートします！
import { gsap } from "gsap";
import { TweenMax, TimelineMax } from "gsap/all";
// 必要なモジュールを選択的にインポート
※CDN経由で読み込んでいる場合は、モジュールのインポートは不要です。
これだけで導入完了となります！かんたん！
基本的な使い方
基本的な記述方法
gsap.to(".hoge", { x: 100 duration: 1 });
こちらが基本的な記述分となります。
第1引数に動かす対象を指定（.hoge）し、第2引数にプロパティと設定値を指定（{ x: 100 duration: 1 }）します。
例として挙げたコードは、1秒間かけてx（水平）方向に300px移動する という指示になります！
gsap.to(".hoge", { x: '10vw' duration: 1 });
また''をつけることで単位での指定も可能です！
動かしたい要素はid、class、セレクタなどで指定することができます！
変数を使ったり配列を渡すことも可能なので、複数要素があっても使いやすいですね。
メソッド
基本的なメソッドはこんな感じです。
| メソッド | 使用用途 |
|---|---|
| gsap.to() | 元の状態から指定した状態へアニメーションさせる |
| gsap.from() | 指定した状態から元の状態へアニメーションさせる |
| gsap.fromTo() | 指定した開始状態から指定した終了状態へアニメーションさせる |
| gsap.set() | アニメーションさせずに初期の状態をセットしておく時に使う |
| gsap.timeline() | 続けて個別に実行したいアニメーションを実装できる |
プロパティ
イージングや時間差などの指定をするプロパティも用意されています。
| プロパティ | 使用用途 |
|---|---|
| delay | アニメーションを開始するまでの遅延時間（s）を指定できる |
| duration | アニメーションの継続時間（s）を指定できる（デフォルト: 0.5） |
| repeat | アニメーションを何回繰り返すかを指定できる |
| yoyo | true の場合、繰り返しごとにトゥイーンをヨーヨーのように反対方向に実行できる（ デフォルト: false） |
| stagger | 複数のターゲットが指定されている場合の各ターゲットのアニメーションの開始間の時間（s）をずらすことができる |
| ease | アニメーション中の変化率を指定することができる（デフォルト: 「power1.out」） |
| onComplete | アニメーションが完了したときに実行される関数を指定できる |
また、GSAPのプロパティでない通常のCSSについてはキャメルケースで記述することにより指定可能です。
例えば、background-colorを指定したい時はbackgroundColorと指定します。値の部分は''で囲めば指定できます。
gsap.to(".hoge", { backgroundColor: '#fff'});
こちらのcodePenが結構いい感じにまとめられていて参考になります！
https://codepen.io/teraken0630/pen/YzRpXJw
私自身が実務で使った部分
私自身が会社のブランドサイトで使用したのは、scrollTriggerプラグインを利用したscrollアニメーションです！
https://gsap.com/scroll/
レスポンシブの都合上SP版とPC版で違うオブジェクトを動かしたかったのでscrollTrigger.matchMedia()を利用しました！
また、同じタイムラインで複数のオブジェクトを動かしたかったのでscrollTrigger:{}でトリガーとなるオブジェクトの指定や始点や終点などの細かい指定を書き、timelineName.fromTo{}の中に動かしたい対象のオブジェクト指定とタイムラインが始点（0%）の時と終点（100%）の時の状態を指定することで実装しました！
ScrollTrigger.matchMedia({
"(max-width: 700px)": () => {
const hogeTL = gsap.timeline({
scrollTrigger: {
// ここにトリガーとなるオブジェクトの指定や始点や終点の指定を書く
trigger: ".hoge",
start: "30% 0",
end: "100% 30%",
...
},
});
huga.fromTo(
// ここに対象のオブジェクト指定とタイムラインの0%と100%の時の状態を書く
".foo",
{ opacity: 1, },
{ opacity: 0, }
);
...
//同じタイムライン上で、複数のオブジェクトを指定できる
}
"(min-width: 701px)": () => {
// ここでウインドウサイズを指定した挙動の振り分けができる
}
})
GSAPを初めて使ってみて
ファーストステップがめちゃくちゃ簡単だった
導入から利用までがとても簡単で、最初の使い方もわかりやすくて良かったです！
とっかかりがスムーズかつ、たくさんの人が利用しているので自分のやりたい仕様の探索もしやすいなという印象でした。
スクロールアニメーションの技術選定としては積極的に利用していきたい
素のJavaScriptで書くと難しいスクロールアニメーションや、さらに他のアニメーションの実装も用意されているので勉強してもっと使えるようになりたいです！
デザインとして動きの提案をもっとできるようになれそうですし、積極的に利用していきたいなと感じました。
最近めちゃくちゃGSAP使ったサイトが多いことに気づいた👀
webデザインの参考サイトなどを眺めていても、多くのサイトでGSAPを使っているのを観測しました。
スクロールアニメーションを実装しているサイトではやはり体験がとてもよく、サイトを見るのが楽しいと感じますね。自分でもそんなサイトを作れるようになりたいのでやはりもっと勉強していけたらなと感じました！自己開発をもっと頑張らなければ...！