はじめに
学んだことを忘れないように備忘録として残しています
そもそもG-SAPとは
Web制作・開発においてモダンなアニメーションを作成するためのJavaScriptライブラリです。
筆者はスライドイン、カルーセルパネル、アコーディオンメニューなどの作成時に使用しています。
導入方法
色々な方法がありますが、簡単なのは公式サイトからCDNを使ってライブラリをheadタグ内で読み込めば導入することができます。
このとき読み込みの順番はG-SAP→JavaScriptファイル
基本構文
```jsx
gsap.to(".box", {
x: 100,
});
- to：メソッド
- .box：第1引数。アニメーションさせる要素を指定（class名やid名）
- x: 100,：第2引数。変化させたい動き(プロパティ)と設定値を指定
TweenとTimeline
GSAPを使う上で、基本であり恩恵を最大化するのに必要なものとして「Tween」と「Timeline」があります。
Tweenとは
要素やオブジェクトのプロパティ（位置、サイズ、色など）を時間に沿って変化させるアニメーションのこと
以下が使用メソッドになります。
| to() | アニメーション終了の状態を指定 |
|---|---|
| from() | アニメーション開始の状態を指定 |
| fromTo() | アニメーションの開始から終了までを指定 |
- toは現在〜未来（未来の時点の状態を書く）
例：透明状態を記述して、ものがあるところから消えるというアニメーションが多い
- fromは過去〜現在（過去の状態を書く）
例：透明状態を記述して、何もないところから出現するというアニメーションが多い
Timelineとは
「連続するTweenの処理を行うときに、前の処理のアニメーション時間に合わせて遅延させる必要なく、簡潔にタイミングを管理できる」というもの
【Timelineを使用しないで連続したアニメーションを書く場合】
gsap.to("#id", {x: 100, duration: 1});
gsap.to("#id", {y: 50, duration: 1, delay: 1}); //1秒遅延
gsap.to("#id", {opacity: 0, duration: 1, delay: 2}); //2秒遅延
１行目→２行目→３行目の順番で連続したアニメーションを起こす時、２つ目のアニメーションの発生を１つ目のアニメーション時間分遅らせる必要があり、
アニメーションが連続するほど複雑な遅延の計算を行わなければならない。
【Timelineを使用して連続したアニメーションを書く場合】
var tl = gsap.timeline({repeat: 2, repeatDelay: 1});
tl.to("#id", {x: 100, duration: 1});
tl.to("#id", {y: 50, duration: 1});
tl.to("#id", {opacity: 0, duration: 1});
Timelineを用いると、遅延を考えずにそのままつなげるだけで、１行目→２行目→３行目の順番で連続したアニメーションを起こすことができます。
おわりに
今回はG-SAP導入の概要を解説しました。