GSAP

【GSAP】GSAPの実装(導入と基本機能)

導入

GSAPの実装するための導入方法は大きくふたつあり、
・CDNで読み込む
・公式サイトからライブラリをダウンロードし自サーバーに設置する
かになります。

CDNで読み込むのが一行コードを追加するだけなのでまずは簡単に始められます。下記コードをhead内もしくはbody最下部に記述します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

基本機能

GSAPには様々な機能がありますが、
代表的なものはgsap.to()などのメソッドを使うTween機能です。

単純なアニメーションの場合下記のように記述します。

gsap.to(".sample", {rotation: 45, x: 100, duration: 1});

.sampleというクラス名の要素が、45度回転しながら、x方向に100px、1秒間かけて移動するアニメーションになります。

一般的なメソッドは3種類あり、
gsap.to()・・・アニメーション終了時の値を指定
gsap.from()・・・アニメーション開始時の値を指定
gsap.fromTo()・・・アニメーション開始時と終了時の値を指定

//gsap.to()・・・アニメーション終了時の値を指定
gsap.to(".sample", {rotation: 45, x: 100, duration: 1});

//gsap.from()・・・アニメーション開始時の値を指定
gsap.from(".sample", {opacity: 0, x: 100, duration: 1});

//gsap.fromTo()・・・アニメーション開始時と終了時の値を指定
gsap.fromTo(".sample", {opacity: 0}, {opacity: 0.5, duration: 1});

のように記述します。

主なプロパティ

x: x軸方向への移動量
y: y軸方向への移動量
repeat: アニメーションのリピート回数
delay: アニメーションが開始するまでの時間
duration: アニメーションの長さ
ease: アニメーションの変化率
onUpdate: アニメーションがアップデートされる際に呼び出される関数
onComplete: アニメーション終了した際に呼び出される関数

参考:https://greensock.com/docs/v3/Installation
http://mtrad-blog.com/2021/09/21/post-2488/
https://note.com/shift_tech/n/n6f11974bff71

【GSAP】GSAPとは

GSAP (ジーサップ:GreenSock Animation Platform) は、GreenSock社が開発しているWeb上でアニメーションを実装するためのJavaScript製の高機能アニメーションライブラリです。GSAPは、高度なアニメーションを高速でスムーズに実行することができるためよく使われています。

公式サイトに制作事例もたくさん掲載されているので、
こちらを見るのがどのようなことが出来るのか一番イメージしやすいかもしれません。
https://greensock.com/showcase/

GSAPは、HTML、SVG、Canvas、React、Angular、Vueなど、様々なコンテンツを対象にアニメーションを実装することができ、3Dアニメーションも実装することができるため、Webアニメーションを制作する上で強力なツールとして広く使われています。

もともとはTweenLite、TweenMax、TimelineLite、TimelineMaxとライブラリが分割されていました。

TweenLiteとTweenMaxは、単独の要素をアニメーションするためのライブラリで、TweenLiteは基本的なアニメーション機能を提供し、TweenMaxは TweenLiteの機能を強化したものです。TimelineLiteとTimelineMaxは、複数のTweenアニメーションを管理するためのライブラリで、TimelineLiteは基本的なタイムライン管理機能を提供し、TimelineMaxはTimelineLiteの機能を強化したものです。

2019年11月にGSAP2からGSAP3に移行し、軽量化に伴いこれらはひとつに統合されました。

シンプルな記述が可能で、軽量かつ多機能、豊富なプラグインなどが特徴になっています。

公式サイト:
https://greensock.com/gsap/

参考:https://b-risk.jp/blog/2022/05/gsap/
https://ics.media/entry/200805/
https://ics.media/entry/220822/