久々に更新します。
今回はアニメーションについてです。
普段はCSSのKeyframeとJSを組み合わせて実装することが多いのですが、
GSAPをよく目にするので試してみました。

同じステータスの方がより早くキャッチアップできたら幸いです。

DEMOリンク

概要

GSAPを使用したアニメーションを試したので、
まだ使ったことない人向けにいくつかTipsを紹介する。

アニメーション基礎

TweenMax.from('※セレクターで要素を指定する※', 0.8, {
delay: 0.2,
y: 30,
opacity: 0,
ease: Circ.easeInOut
}, 0.08);

さて、上記の形が基本的な書き方となる。
特に気にしなければ、これをセレクターごとに書き連ねていくと、一連のアニメーションを実装することができる。
「from」は開始時の状態を意味する。
他には「to」を設定できる。
「to」はアニメーションの終了時の状態を示す。

今回はアニメーションが実装できることを目標とし、各パラメータの意味を知ることは、目指さない。
例えば、複数アニメーションを設定する際のタイムラインの制御には言及しない。

下から出てくる(横から出てくる)

キーワード：x, y

TweenMax.from('.header__title', 0.8, {
delay: 0.2,
y: 30,
opacity: 0,
ease: Circ.easeInOut
}, 0.08);

これは単純で、
縦移動させたい時には「y」を、
横移動させたい時には「x」を設定すれば良い。

スクロールしてViewport内に入ったら出てくる

キーワード：scrollTrigger

TweenMax.from('.main__lead span', 0.8, {
scrollTrigger: {
trigger: '.main__lead span',
},
stagger: {
form: 'start',
amount: 1
},
y: 10,
opacity: 0,
ease: Circ.easeInOut
}, 0.03);

スクロールしてViewportに対象の要素が入ったことを検知してアニメーションを実行するには「scrollTrigger」を設定すれば良い。
開始位置やViewportのどこに達したら発火するかなどのオプションもあるが、
詳しくは公式を確認してほしい。
https://greensock.com/docs/v3/Plugins/ScrollTrigger

順番に出てくる

キーワード：stagger

TweenMax.from('.main__lead span', 0.8, {
scrollTrigger: {
trigger: '.main__lead span',
},
stagger: {
form: 'start',
amount: 1
},
y: 10,
opacity: 0,
ease: Circ.easeInOut
}, 0.03);

上記は一文字ずつ下から出てくるアニメーションを示す。
「stagger」を使う。
「from」は何番目から開始するかを示す。
「amount」は要素間のアニメーション実行タイミングのずれを示す。
1は0.01sを表すようだ。
https://greensock.com/docs/v3/Staggers

アニメーションを繰り返す

キーワード：repeat

TweenMax.staggerFrom('.bg_line', 0.8, {
delay: 1.3,
width: 0,
opacity: 0,
ease: Circ.easeInOut,
repeat: -1
}, 0.3);

最後に、繰り返しについて。
繰り返しには「repeat」を設定する。
基本的には基本的には、正の整数を設定して、何回繰り返すかを示す。
無限に繰り返したい時には「-1」とすれば良い。

最後に

以上でGSAPを使用したアニメーションの基礎を以上とする。
まずは触ってみて動くことを目標としているが、
実際にどういった使い道をするのかを
よくある構成で組んでみたのでデモを見て欲しい。

DEMOリンク

今度はタイムラインについてなど、公式を読んでも手を動かさないと分からないようなことをピックアップして記事にできればと思う。

以上。