gsapオブジェクトは、Tweens表現と Timelines表現をつくるライブラリ。

Tween でアニメーションをつくる方法

Tween は、動きをつける要素、動かす期間、動きをつける要素のプロパティを設定してアニメーションをつくる。

gsap.to()
gsap.from()
gsap.fromTo()

用例）

// 要素を1秒間に27度回転させ、x方向に100ピクセル移動させる。
gsap.to("要素", {rotation: 27, x: 100, duration: 1});

Timeline でアニメーションをつくる方法

Timeline は、Tweenのコンテナ（Tweenを入れる高機能な箱）。

Timelineは、pause() / play() / progress() / reverse() / timeScale() メソッドを使って、箱に入れられたアニメーション全体を簡単に制御する。

用例）

var tl = gsap.timeline();
tl.to("要素A", {duration: 2, x: 100, opacity: 0.5})
.to("要素B", {duration: 2, x: 100, opacity: 0.5})
.to("要素C", {duration: 2, x: 100, opacity: 0.5});

Tween と Timeline でよく使われるメソッドとプロパティ

• pause()
• play()
• progress()
• restart()
• resume()
• reverse()
• seek()
• time()
• duration()
• timeScale()
• kill()

※ GSAPでは疑似要素にアニメーションをつけることができない。GSAP3で非推奨になった。