【GSAP】TweenMaxのcycleの使い方とは？ - ふんばりフロントエンジニアのブログ

お久しぶりの更新です…

またもや忙殺されていました...

最近はシステム案件の仕事をすることも多いのですが、今回は久しぶりにwebページのコーディング案件に取り組むことに。

そして今回の案件は結構アニメーションが多かったんですよね。

以前の記事でTweenMaxとScrollMagicを連携させる、という内容を書いたのですが結構さわりの部分だけお話して終わってしまった感がありました...

今回取り組んだ案件でこんな使い方あったんか！的なことを見つけたこともあったので、TweenMaxのcycleの使い方についてまとめてみようと思います！

cycleとは、TweenMaxをはじめとするGSAPの各種アニメーションタイプで利用することのできるプロパティの一つ。

今回の案件では以前の案件で使っていたアニメーション設定などを使いまわしていたのですが、今回は以前と違って少し凝ったアニメーションをかけてほしいという要望が...

その要望というのが、「複数の要素に対するアニメーションをそれぞれ食い気味でかけてほしい」との要望でした。

TweenMaxで複数の要素にアニメーションをかけるメソッドとして、「stagger系」のメソッドがありますよね。

例えば、staggerFromやstaggerToなどがそうです。

例を出すとこのような感じでアニメーションをかけてくれます。

See the Pen
tweenSimple by nakajima masahiro (@nakajima333ta)
on CodePen.

複数の要素にアニメーションをかけるとき、上記のように書くことができるのですが、見て分かるように前のアニメーションが終わってから次のアニメーションがスタートしていますよね。

ただ、このアニメーションをそれぞれ食い気味のタイミングでかけてほしいという要望...

さて、どうしたものかと考えたのがまずfor文でそれぞれインデックス番号に応じてマイナスのdelayをかけるという方法。

サンプルを載せるとこのような感じですね。

See the Pen
tweenSimple by nakajima masahiro (@nakajima333ta)
on CodePen.

しかし、なんかもっといい方法ありそうだよな〜と思っていた矢先、どうやら「cycle」というメソッドがあるみたい！

ということで、cycleを使ったものに書き換えてみると...

See the Pen
tweenCycle by nakajima masahiro (@nakajima333ta)
on CodePen.

こんな感じになりました！

いやーかなりスッキリしたというか早くこの方法に出会いたかったですね...

さて、説明をするとcycleというのはstagger系でのみ利用することができるアニメーションプロパティです。

最大の特徴はこのcycleで使うことができるプロパティ「index」にあるでしょう。

実はcycleでは指定された要素（上記例では.box）を配列のように管理し、インデックス番号をアニメーションに利用することができます。

そして、このcycleの値としてdelayを設定する際に、インデックス番号を負の数で掛け算してやると、マイナスディレイが生まれるわけです。

関数でdelayの値を返しているのもポイントですね。

まあ考え方としてはfor文で回すのと変わらないのですが、せっかくcycleというプロパティがあるので使ったほうがお得ですよね（笑）

要素を時間差でかけるのは普通のdelayでできますが、マイナスの時間差をかけるのはcycleを使わないと実現できなそう。

割と調べるのに時間かかってしまったので、少しでも参考になれば嬉しいです^^