GSAPを使ってアニメーションを使いこなそう！導入方法・基本文法・プロパティ・イージング関数一覧など
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
TweenとTimeline
GSAPは主にTweenとTimelineという2つの主要な概念から構成されます。基本文法やTweenとTimelineの理解が深まることで、アニメーションを実装しやすくなります。
Tweenとは？ 記述例：See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
説明 : target.boxを操作対象として指定しています。property: valueアニメーションしたいプロパティと目標の値を指定します。（opacity: 0）durationアニメーションの時間を秒単位で指定します。easeイージング関数を指定します。アニメーションの進行速度を制御します。 Timelineとは？ 記述例：See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
説明 : gsap.timeline()タイムラインを作成します。to()タイムラインにTweenを追加します。targetアニメーション対象の要素やオブジェクトを指定します。（.box,.box2）property: valueアニメーションしたいプロパティと目標の値を指定します。（x: 300,y: 100）easeイージング関数を指定します。“-=2.5”タイムライン内のアニメーションを調整、先行するTweenの終了時間を2.5秒遅らせます。一つ目のアニメーションが開始してから2.5秒後に二つ目のアニメーションが実行され、二つのアニメーションが同時に完了します。このアニメーションに関しては、CSSと比較した際にGSAPの方が命令が出しやすい印象です。CSSで制御すると、ちょっと記述や考え方が面倒になりそうですよね。シンプルな記述でタイムラインを制御できるというのは、GSAPの大きな特徴かと思います！
GSAPでよく使うプロパティ
移動（x,y）See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
xはCSSのtransform: transrateX()を、yはCSSのtransform: transrateY()を制御します。上の記述ではトゥイーンによって円を移動しています。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
拡大・縮小（scale）See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
scaleXはCSSのtransform: scaleX()を、scaleYはCSSのtransform: scaleY()を制御します。上の記述ではトゥイーンによって円を拡大しています。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
XスケールとYスケールを同時に変更する場合scaleプロパティでまとめて指定します。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
回転（rotation）See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
歪み（skew）See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
時間制御について（duration,delay）
- ・duration:アニメーションの開始から完了までの時間を指定
- ・delay:アニメーション開始までの時間を指定
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
アニメーションの繰り返し（repeat,repeatDelay,yoyo,yoyoEase）
- ・repeat:繰り返しの回数を指定（-1で無限）
- ・repeatDelay:繰り返し実行する際の遅延を指定
- ・yoyo:繰り返す時にアニメーションを反転するかを指定（trueで反転）
- ・yoyoEase:反転する際のイージングを指定
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
イージング関数一覧表
イージング関数バリエーション説明イメージ power0 (Linear) .none 等速でアニメーションする（加速・減速なし）。 p ower1 (Quad) .in ゆっくり開始し、加速する。 .out 加速した後、ゆっくり終了する。 .inOut ゆっくり開始し、加速し、中間で最速になった後、減速する。 p ower2 (Cubic) .in p ower1 よりも強い加速で開始する。 .out p ower1.out よりも強く減速して終了する。 .inOut p ower1.inOut よりも強い加減速がある。 p ower3 (Quart) .in p ower2 よりも急激に加速する。 .out p ower2.out よりも急激に減速する。 .inOut p ower2.inOut よりも急激な加減速を持つ。 p ower4 (Quint) .in p ower3 よりも極端に加速する。 .out p ower3.out よりも極端に減速する。 .inOut p ower3.inOut よりも極端な加減速を持つ。 back .in 逆方向に少し戻ってから加速する。 .out 目標地点を少し超えてから戻る。 .inOut 開始時に少し戻り、終了時も少し超えてから戻る。 bounce .in バウンドの逆バージョン（落下ではなく跳ね上がるような動き）。 .out 自然なバウンド（床にぶつかるような動き）。 .inOut 開始時と終了時にバウンドが発生する。 circ .in 円弧のように滑らかに加速する。 .out 円弧のように滑らかに減速する。 .inOut 円弧のような加速と減速の両方を持つ。 elastic .in ゴムのように一度縮んでから勢いよく進む。 .out 目標地点を過ぎてからバウンドしながら落ち着く。 .inOut 開始時と終了時に弾む動きが入る。 expo .in ゆっくり開始し、急激に加速する。 .out 急激に減速しながら終了する。 .inOut 両端でゆっくり、中間で爆発的に加速する。 sine .in なめらかに加速する（サイン波のような動き）。 .out なめらかに減速する。 .inOut 全体的にスムーズな加速・減速を行う。 イージング関数の適用方法GSAPでイージングを適用するには、以下のように ease を指定します。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
アニメーションサンプル
要素が順番に表示するオープニングアニメーション 完成例（動画）： コードの記述：See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
アニメーション実装の流れ：- 1. headerを拡大
- 2. h1を表示
- 3. h1を拡大しながら非表示
- 4. .contentを表示
- 5. h2を上から下にスライドしながら表示
- 6. .circleを右から左にスライドしながら表示
- 読み込んでから11秒後に.circleを回転
GSAPの導入方法と基本文法〜TweenとTimeliineについてまでを動画で紹介
【入門01】GSAPの紹介と導入方法 【入門02】GSAPの実装手順と基本文法 【入門03】GSAPのTweenとTimelineまとめ
TweenやTimelineといった映像編集における概念を言語で操作できるところが大きな特徴ですね。またそれらを操作しやすいシンプルな文法で学習しやすいライブラリと言えます。
こちらの記事はいかがでしたか？ Related postsRECENT ENTRIES
- Web制作会社がAIを導入して変わったこと｜実例付きメリット・デメリット
- 【ローカルWordPress】https://localhost に勝手にリダイレクトされる原因と解決法｜SSLエラー「ERR_SSL_PROTOCOL_ERROR」の直し方
- GEO・SGEとは？SEOとの違い | 導入方法や効果など徹底紹介
- コーディング不要でハンバーガーメニュー作成！「Hamburger Menu Generator」の使い方と特徴を徹底解説