スキル自身の言葉で
gsap.utils は、数値計算・範囲・単位・色・コレクションを扱う GSAP の純粋なヘルパー関数群であり、登録は不要です。このスキルは、clamp、mapRange、normalize、interpolate、random、snap、shuffle、distribute、getUnit、unitize、splitColor、selector、toArray、pipe、wrap、wrapYoyo について、それぞれの署名・デフォルト値・実行結果の例を文書化しています。
これは、スクロールを値にマッピングしたり、入力を正規化したり、グリッドにスナップしたり、コンポーネント内でセレクタのスコープを設定したりする GSAP コードを書く、あるいはレビューする開発者向けです。ファイル全体を通じて一つのパターンが繰り返されます。末尾の値を省略すると再利用可能な関数が得られますが、random() は例外で true を渡します。
生成されるもの
- value 引数を渡した場合に直接返される変換後の値
- 後から渡す値を clamp、map、normalize、snap する、再利用可能な関数
- 同じ要素をランダムな順序で並べ替えた新しい配列
- 指定された要素または ref 内のみで要素を検索する、スコープ付きのセレクタ関数
仕組み
- 01ヘルパーは gsap.utils 上に存在します
これらの utils は登録不要の純粋なヘルパーであり、JS が GSAP を操作する場所であれば、tween の vars、ScrollTrigger や Observer のコールバックなど、どこからでも呼び出せます。
- 02値を最後に渡すと、結果が即座に得られます
多くの utils は、設定を先に受け取り、変換対象の値を最後の引数として受け取り、変換された結果を即座に返します。
- 03それを省略すると関数形式になります
その最後の値を省略すると、util は後から値を渡して呼び出せる関数を返すため、一つの設定を多くの値に対して使い回せます。
- 04random() はパターンが逆になることに注意してください
random() は再利用可能な形式のために省略を使いません。最後の引数に true を渡すと、呼び出すたびに新しい値を返す関数が得られます。
- 05snap は tween 自体の中で設定できます
グリッドやステップ単位の動きには、先に util を呼び出す代わりに、tween の vars 内で直接 snap を渡すことができます。
- 06pipe で変換をチェーンする
pipe は関数を左から右へ合成するため、normalize してから snap を適用する処理を、tween やコールバック内で単一の関数として実行できます。