スキル自身の言葉で
プラグイン登録と、ScrollTrigger 以外のすべてのプラグイン（ScrollTo、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、DrawSVG、MorphSVG、MotionPath、CustomEase、EasePack、CustomWiggle、CustomBounce、Physics2D、PhysicsProps、PixiPlugin、GSDevTools）を扱う公式 GSAP スキルです。
まずライセンスについて説明します——すべてのプラグインは無料で、Club GSAP のメンバーシップや認証トークンは不要です——その後、プラグインごとの設定（Flip.from の vars、Draggable のオプション、SplitText.create の vars、morphSVG のオプション、motionPath の alignment）を示します。公開されている gsap npm パッケージからすべてをインストールし、正しい呼び出し順序、デフォルト値、注意点を必要とするデザイナーおよび開発者向けです。関連スキル：gsap-core、gsap-scrolltrigger、gsap-react。
生成されるもの
- ウィンドウや任意のスクロール可能な要素を、ある位置やターゲットへアニメーションさせるスクロールトゥイーンです。
- chars、words、lines を公開し、mask が設定されている場合は masks も公開する SplitText インスタンスです。
- circle、rect、ellipse、line の代わりに DOM に差し替えられる、変換された path 要素です。
仕組み
- 01プラグインは最初に一度だけ登録する
各プラグインは、いずれのトゥイーンや API 呼び出しで使用される前に、GSAP とバンドラーがそれを含めるよう認識できるように、一度だけ登録します。
- 02Flip で状態を記録し、変更し、そしてアニメーションする
Flip は3段階のシーケンスです：古い状態を読み取り、DOM を変更し、記録された状態から新しい状態へアニメーションします。
- 03ドラッグとスロー操作を作成する
Draggable.create は type、任意の bounds と inertia を受け取り、InertiaPlugin がリリース後の運動量を提供します。
- 04テキストをアニメーション可能な単位に分割する
SplitText は文字、単語、行をそれぞれ独自の要素に配置し、単位ごとにスタガーやアニメーションができるようにします。
- 05SVG を描画または変形する
SVG プラグインは、描画効果のために stroke dash の値をアニメーションさせるか、ある形状を別の形状へ変形させるために path の d 属性をアニメーションさせます。
- 06イージングとフィジックスのプラグインを活用する
イージングプラグインはカスタムカーブや名前付きイージングを追加し、フィジックスプラグインは velocity、angle、gravity の値からモーションを駆動します。