Club GreenSock の ShockinglyGreen 以上で使用可能になる全プラグインの概要を紹介します。
各プラグインの公式ページを確認した程度で実装経験はほとんどないため、こんなことができるのかという紹介になります。
プラグインそれぞれのオプションや実装方法については、また機会があれば行いたいと思います。
＊「使える度」は個人的な主観で☆1〜3個で評価しています。
DrawSVGPlugin
使える度：☆☆☆
読み込むファイル：DrawSVGPlugin.min.js
stroke-dashoffset、stroke-dasharray を使って、文字のアウトラインをなぞっていくアニメーションの作成に便利です。
-
<path>、<line>、<polyline>、<polygon>、<rect>、<ellipse>に使用できます。 - ストロークの中心から外側にアニメーション化することができます。
- アウトラインの長さを % で記載できます。
-
drawSVG:"20% 80%"は、ストロークを20％と80％の位置の間にレンダリングします。つまり、両端に20％のギャップがあります。
See the Pen DrawSVGPlugin (All SVG Shape Types) by shuCream (@shuCream) on CodePen.
Physics2DPlugin
使える度：☆
読み込むファイル：Physics2DPlugin.min.js
具体的なユースケースは思い当たりませんが、使いどころ次第で面白い表現になると思います。
- トゥイーンに対して定義するイージング方程式は、これらのプロパティでは完全に無視されることに注意してください。
-
translate(x, y)を、velocity（速度）、angle（角度）、gravity（重力）、acceleration（加速度）、accelerationAngle（加速角度）などの設定で変化させることができます。
See the Pen Physics2D for GSAP 3 Demo (used in docs) by GreenSock (@GreenSock) on CodePen.
PhysicsPropsPlugin
使える度：☆
読み込むファイル：PhysicsPropsPlugin.min.js
Physics2DPlugin に似ていますが、特定の最終値を考慮せずに、特定の速度や加速度で値を変化させたい場合に使えると思われます。
-
PhysicsPropsPlugin.min.jsを読み込みます。 - トゥイーンに対して定義するイージング方程式は、これらのプロパティでは完全に無視されることに注意してください。代わりに、物理パラメータが動き/緩和を決定します。
- パラメータは、
velocity、acceleration、friction（摩擦）です。
See the Pen PhysicsPropsPlugin Basic Demo by GreenSock (@GreenSock) on CodePen.
ScrambleTextPlugin
使える度：☆☆
読み込むファイル：ScrambleTextPlugin.min.js
テキストエフェクトを簡単に実装できます。
- 大文字小文字などもオプションで設定できます。
- スクランブル部分の文字列も設定できます。
See the Pen GSAP Scramble Text Plugin - feature plugin page by GreenSock (@GreenSock) on CodePen.
CustomBounce
使える度：☆☆☆
読み込むファイル：CustomEase.min.js、CustomBounce.min.js
無料で使える CustomEase では、バウンス系のカスタマイズをイージングしたい場合、細かな設定が困難ですが、このプラグインを使うことで、ボールが跳ね返ったりするような動きをカスタマイズしやすくなります。
-
squash（押しつぶす）プロパティを使うことで、ボールが潰れるような動きを表現できます。
See the Pen Video: CustomBounce from GreenSock by GreenSock (@GreenSock) on CodePen.
CustomWiggle
使える度：☆☆
読み込むファイル：CustomEase.min.js、CustomWiggle.min.js
CustomWiggle は、小刻みに動く量とタイプを設定できる CustomEase のバリエーションです。
See the Pen CustomWiggle Demo : GSAP 3 by GreenSock (@GreenSock) on CodePen.
Flip
使える度：まだしっかり理解できてないのですが、☆2つ以上かなと想像。
読み込むファイル：Flip.min.js
Flipプラグインを使用すると、要素の親の変更など、DOMの構造に大幅な変更があった場合でも、2つの状態間をシームレスに移行できます。
See the Pen Flip Between Different Targets - GSAP Flip by GreenSock (@GreenSock) on CodePen.
See the Pen Flipping Flexbox by GreenSock (@GreenSock) on CodePen.
GSDevTools
使える度：☆☆
読み込むファイル：GSDevTools.min.js
GSAPアニメーションを操作およびデバッグするためのビジュアルUIを提供。
InertiaPlugin
使える度：まだしっかり理解できてないのですが、☆2つ以上かなと想像。
Inertia=慣性という意味。InertiaPlugin（以前のThrowPropsPlugin）を使用すると、プロパティをスムーズに滑らせて停止させ、初速度を尊重し、終了値にオプションの制限を適用できます。
See the Pen Draggable "Toss" Demo by GreenSock (@GreenSock) on CodePen.
MorphSVGPlugin
使える度：☆☆☆
読み込むファイル：MorphSVGPlugin.min.js
これは私も実際に使ったのですが、大変助かりました。
モーフィングが簡単に実装できます！
このプラグインを入れるメリットは、以下の部分に集約できます。
ポイントの数（およびタイプ）が開始形状と終了形状で完全に異なっていても、モーフデータ！他のほとんどのSVG形状モーフィングツールでは、ポイントの数が一致している必要があります。
ポイント数を合わせたSVGデータを用意するためには、デザイナーさんのリソースをかなり使う必要があります。（書き出し方によってはうまくいかないことも多く厄介です。）
See the Pen MorphSVG type:"rotational" for more natural morphs by GreenSock (@GreenSock) on CodePen.
MotionPathHelper
使える度：☆☆☆
読み込むファイル：MotionPathPlugin.min.js、MotionPathHelper.min.js
これは便利そう！！
デザイナーさんと画面共有しながら調整したりできるし、調整したパスをコピーすることもできます。
MotionPathHelperは、アンカーとコントロールポイントをドラッグしたり、追加/削除したり、パス全体をドラッグしたりすることで、ブラウザーで直接モーションパスをインタラクティブに編集できるClubGreenSock特典です。
See the Pen MotionPathHelper demo by GreenSock (@GreenSock) on CodePen.
SplitText
使える度：☆☆☆
読み込むファイル：SplitText.min.js
たまに要件として上がるアニメーションですね。これだけのために使う必要はないかもしれないですが、どうせ GSAP を使っているという場合は使ってもいいかなと思います。
See the Pen SplitText: Character Animation with staggers by GreenSock (@GreenSock) on CodePen.
まとめ
プラグインはあくまでプラグインなので、技術力がしっかりあれば使う必要はないのかもしれません。しかしこういうものがあるんだと知っておくと、表現の幅が拡がったり、実装のヒント、リソースの助けになると思います。
GreenSock の有料プラグインも、オープンソースで公開されていますので、時間があればコードレビューを行い、どういうプログラムで実現されているのかを理解すると、より楽しくなるかもしれません。