Club GreenSock 追加される全プラグインの紹介

Club GreenSock の ShockinglyGreen 以上で使用可能になる全プラグインの概要を紹介します。

各プラグインの公式ページを確認した程度で実装経験はほとんどないため、こんなことができるのかという紹介になります。

プラグインそれぞれのオプションや実装方法については、また機会があれば行いたいと思います。
＊「使える度」は個人的な主観で☆1〜3個で評価しています。

## DrawSVGPlugin
使える度：☆☆☆
読み込むファイル：`DrawSVGPlugin.min.js`

stroke-dashoffset、stroke-dasharray を使って、文字のアウトラインをなぞっていくアニメーションの作成に便利です。

https://greensock.com/docs/v3/Plugins/DrawSVGPlugin

- `<path>`、`<line>`、`<polyline>`、`<polygon>`、`<rect>`、`<ellipse>`に使用できます。
- ストロークの中心から外側にアニメーション化することができます。
- アウトラインの長さを % で記載できます。
- `drawSVG:"20% 80%"` は、ストロークを20％と80％の位置の間にレンダリングします。つまり、両端に20％のギャップがあります。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="shuCream" data-slug-hash="xxqdVEE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="DrawSVGPlugin (All SVG Shape Types)">
  <span>See the Pen <a href="https://codepen.io/shuCream/pen/xxqdVEE">
  DrawSVGPlugin (All SVG Shape Types)</a> by shuCream (<a href="https://codepen.io/shuCream">@shuCream</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## Physics2DPlugin
使える度：☆
読み込むファイル：`Physics2DPlugin.min.js`

具体的なユースケースは思い当たりませんが、使いどころ次第で面白い表現になると思います。

https://greensock.com/docs/v3/Plugins/Physics2DPlugin

- トゥイーンに対して定義するイージング方程式は、これらのプロパティでは完全に無視されることに注意してください。
- `translate(x, y)` を、`velocity（速度）`、`angle（角度）`、`gravity（重力）`、`acceleration（加速度）`、`accelerationAngle（加速角度）` などの設定で変化させることができます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="GreenSock" data-slug-hash="PooWQdb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Physics2D for GSAP 3 Demo (used in docs)">
  <span>See the Pen <a href="https://codepen.io/GreenSock/pen/PooWQdb">
  Physics2D for GSAP 3 Demo (used in docs)</a> by GreenSock (<a href="https://codepen.io/GreenSock">@GreenSock</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## PhysicsPropsPlugin
使える度：☆
読み込むファイル：`PhysicsPropsPlugin.min.js`

`Physics2DPlugin` に似ていますが、特定の最終値を考慮せずに、特定の速度や加速度で値を変化させたい場合に使えると思われます。

https://greensock.com/docs/v3/Plugins/PhysicsPropsPlugin

- `PhysicsPropsPlugin.min.js` を読み込みます。
- トゥイーンに対して定義するイージング方程式は、これらのプロパティでは完全に無視されることに注意してください。代わりに、物理パラメータが動き/緩和を決定します。
- パラメータは、`velocity`、`acceleration`、`friction（摩擦）` です。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="GreenSock" data-slug-hash="PpKbBp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="PhysicsPropsPlugin Basic Demo">
  <span>See the Pen <a href="https://codepen.io/GreenSock/pen/PpKbBp">
  PhysicsPropsPlugin Basic Demo</a> by GreenSock (<a href="https://codepen.io/GreenSock">@GreenSock</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## ScrambleTextPlugin
使える度：☆☆
読み込むファイル：`ScrambleTextPlugin.min.js`

テキストエフェクトを簡単に実装できます。

https://greensock.com/docs/v3/Plugins/ScrambleTextPlugin

- 大文字小文字などもオプションで設定できます。
- スクランブル部分の文字列も設定できます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="GreenSock" data-slug-hash="dIBbw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="GSAP Scramble Text Plugin - feature plugin page">
  <span>See the Pen <a href="https://codepen.io/GreenSock/pen/dIBbw">
  GSAP Scramble Text Plugin - feature plugin page</a> by GreenSock (<a href="https://codepen.io/GreenSock">@GreenSock</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## CustomBounce
使える度：☆☆☆
読み込むファイル：`CustomEase.min.js`、`CustomBounce.min.js`

無料で使える [CustomEase](https://greensock.com/docs/v3/Eases/CustomEase) では、バウンス系のカスタマイズをイージングしたい場合、細かな設定が困難ですが、このプラグインを使うことで、ボールが跳ね返ったりするような動きをカスタマイズしやすくなります。

https://greensock.com/docs/v3/Eases/CustomBounce

- `squash（押しつぶす）` プロパティを使うことで、ボールが潰れるような動きを表現できます。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="GreenSock" data-slug-hash="pRowwX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Video: CustomBounce from GreenSock">
  <span>See the Pen <a href="https://codepen.io/GreenSock/pen/pRowwX">
  Video: CustomBounce from GreenSock</a> by GreenSock (<a href="https://codepen.io/GreenSock">@GreenSock</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## CustomWiggle
使える度：☆☆
読み込むファイル：`CustomEase.min.js`、`CustomWiggle.min.js`

CustomWiggle は、小刻みに動く量とタイプを設定できる CustomEase のバリエーションです。

https://greensock.com/docs/v3/Eases/CustomWiggle

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="GreenSock" data-slug-hash="oNvQeMM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CustomWiggle Demo : GSAP 3">
  <span>See the Pen <a href="https://codepen.io/GreenSock/pen/oNvQeMM">
  CustomWiggle Demo : GSAP 3</a> by GreenSock (<a href="https://codepen.io/GreenSock">@GreenSock</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## Flip
使える度：まだしっかり理解できてないのですが、☆2つ以上かなと想像。
読み込むファイル：`Flip.min.js`

Flipプラグインを使用すると、要素の親の変更など、DOMの構造に大幅な変更があった場合でも、2つの状態間をシームレスに移行できます。

https://greensock.com/docs/v3/Plugins/Flip

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="GreenSock" data-slug-hash="XWKLYWe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Flip Between Different Targets - GSAP Flip">
  <span>See the Pen <a href="https://codepen.io/GreenSock/pen/XWKLYWe">
  Flip Between Different Targets - GSAP Flip</a> by GreenSock (<a href="https://codepen.io/GreenSock">@GreenSock</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="GreenSock" data-slug-hash="zYqLjre" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Flipping Flexbox">
  <span>See the Pen <a href="https://codepen.io/GreenSock/pen/zYqLjre">
  Flipping Flexbox</a> by GreenSock (<a href="https://codepen.io/GreenSock">@GreenSock</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## GSDevTools
使える度：☆☆
読み込むファイル：`GSDevTools.min.js`

GSAPアニメーションを操作およびデバッグするためのビジュアルUIを提供。

https://greensock.com/gsdevtools/

![devTools-GUI.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298406/cbdc9600-2f5e-1c73-4fce-402cc59ab1d6.gif)

## InertiaPlugin
使える度：まだしっかり理解できてないのですが、☆2つ以上かなと想像。

Inertia=慣性という意味。InertiaPlugin（以前のThrowPropsPlugin）を使用すると、プロパティをスムーズに滑らせて停止させ、初速度を尊重し、終了値にオプションの制限を適用できます。

https://greensock.com/docs/v3/Plugins/InertiaPlugin

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="GreenSock" data-slug-hash="zDwEk" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Draggable &amp;quot;Toss&amp;quot; Demo">
  <span>See the Pen <a href="https://codepen.io/GreenSock/pen/zDwEk">
  Draggable &quot;Toss&quot; Demo</a> by GreenSock (<a href="https://codepen.io/GreenSock">@GreenSock</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## MorphSVGPlugin
使える度：☆☆☆
読み込むファイル：`MorphSVGPlugin.min.js`

これは私も実際に使ったのですが、大変助かりました。
モーフィングが簡単に実装できます！
このプラグインを入れるメリットは、以下の部分に集約できます。

> ポイントの数（およびタイプ）が開始形状と終了形状で完全に異なっていても、モーフ<path>データ！他のほとんどのSVG形状モーフィングツールでは、ポイントの数が一致している必要があります。

ポイント数を合わせたSVGデータを用意するためには、デザイナーさんのリソースをかなり使う必要があります。（書き出し方によってはうまくいかないことも多く厄介です。）

https://greensock.com/docs/v3/Plugins/MorphSVGPlugin

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="GreenSock" data-slug-hash="vvjOGq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="MorphSVG type:&amp;quot;rotational&amp;quot; for more natural morphs">
  <span>See the Pen <a href="https://codepen.io/GreenSock/pen/vvjOGq">
  MorphSVG type:&quot;rotational&quot; for more natural morphs</a> by GreenSock (<a href="https://codepen.io/GreenSock">@GreenSock</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## MotionPathHelper
使える度：☆☆☆
読み込むファイル：`MotionPathPlugin.min.js`、`MotionPathHelper.min.js`

これは便利そう！！
デザイナーさんと画面共有しながら調整したりできるし、調整したパスをコピーすることもできます。

>MotionPathHelperは、アンカーとコントロールポイントをドラッグしたり、追加/削除したり、パス全体をドラッグしたりすることで、ブラウザーで直接モーションパスをインタラクティブに編集できるClubGreenSock特典です。

https://greensock.com/docs/v3/Plugins/MotionPathHelper

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="GreenSock" data-slug-hash="oNNEdRV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="MotionPathHelper demo">
  <span>See the Pen <a href="https://codepen.io/GreenSock/pen/oNNEdRV">
  MotionPathHelper demo</a> by GreenSock (<a href="https://codepen.io/GreenSock">@GreenSock</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## SplitText
使える度：☆☆☆
読み込むファイル：`SplitText.min.js`

たまに要件として上がるアニメーションですね。これだけのために使う必要はないかもしれないですが、どうせ GSAP を使っているという場合は使ってもいいかなと思います。

https://greensock.com/docs/v3/Plugins/SplitText

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="GreenSock" data-slug-hash="mvhak" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="SplitText: Character Animation with staggers">
  <span>See the Pen <a href="https://codepen.io/GreenSock/pen/mvhak">
  SplitText: Character Animation with staggers</a> by GreenSock (<a href="https://codepen.io/GreenSock">@GreenSock</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## まとめ
プラグインはあくまでプラグインなので、技術力がしっかりあれば使う必要はないのかもしれません。しかしこういうものがあるんだと知っておくと、表現の幅が拡がったり、実装のヒント、リソースの助けになると思います。

GreenSock の有料プラグインも、オープンソースで公開されていますので、時間があればコードレビューを行い、どういうプログラムで実現されているのかを理解すると、より楽しくなるかもしれません。