GSAPについてざっくりとまとめる。

GSAPとは？

GreenSock社が開発している軽量で多機能なJavaScriptライブラリです。
GSAPはCSS、HTML Canvas、WebGLなどさまざまなWEBサイトのアニメーションに利用することができます。

GSAP用語

トゥイーン(Tween)

アニメーションの始まりから終わりの間を保管する機能のこと。動きの途中を自動的に埋めてくれる。
「.to()」がトゥーインを表す。

// "box"クラスの要素をtranslateX(100px)で1秒かけて回転移動します。
gsap.to(".box", {rotation: 27, x: 100, duration: 1});

タイムライン(Timeline)

モーションの一つ一つをまとめて、全体を時系列で制作できる。PremiereとかAfter Effectsのタイムラインと同じ感じ。

// タイムラインを作成
let timeline = gsap.timeline();

// 複数のトゥーインをタイムラインに追加します。

// ".green"をtranslateX(600px)で2秒かけて移動します。
timeline.to(".green",{x: 600, duration: 2});

// ".purple"をtranslateX(600px)で1秒かけて移動します。
timeline.to(".purple",{x: 600, duration: 1});

// ".orange"をtranslateX(600px)で1秒かけて移動します。
timeline.to(".orange",{x: 600, duration: 1});

スクロールトリガー(ScrollTrigger)

スクロールイベントを制御するライブラリ。コード量が少なくシンプル。

// "box"クラスの要素をビューポートに入ったらtranslateX(500px)で移動させます。
gsap.to("box", {
scrollTrigger: ".box",
x: 500 });

デュレーション(duration)

propertyの1つで、アニメーション開始の時間のこと。

イーズ(ease)

加減速のこと。

ディレイ(delay)

遅延秒数。

yoyo

リピード時に反復するか。trueで反復。デフォルトはfalseなので省略可能。

ポーズ(paused)

一時停止にするか。trueで一時停止する。デフォルトはfalseなので省略可能。