gsap-utils
GSAP の小さな道具 gsap.utils（範囲に収める、範囲を写す、乱数、格子に揃える、配列にする、ぐるりと回すなど 16 個）を、正しい引数の順で使わせる。値を省くと関数が返る書き方まで押さえる。GSAP 公式が出している手引き
npx skills add greensock/gsap-skills/gsap-utils入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 69,010
- 実用度
- 56
- GitHub star
- 18,004
- 最終更新
- 2026/7/30
頼み方の例
そのままコピーして使えますgsap-utilsスキルを使って、ページのスクロール量（0〜1）を、見出しの回転の角度（0〜360 度）と 10 度刻みの値に変える書き方を出してください。同じ設定で何度も呼ぶので、関数の形で作ってください。コードはまだ書き換えないでください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- 外部通信・シェル実行・ファイル操作の記述は見つかりませんでした
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
コードブロックの言語: javascript
いつ使うか
GSAP で動きを作るときの、数の計算や要素の集め方に効きます。スクロールの量を角度に写す、値を範囲に収める、乱数を格子に揃える、といった細かい処理です。GSAP を作っている公開元（GreenSock）の公式の手引きで、同じリポジトリの 8 件の 1 つです。
16 個の道具
説明文（description）が名前を挙げているのは 9 個ですが、本文は 16 個を扱っています。
- 範囲
clamp（収める）、mapRange（写す）、normalize（0〜1 に）、interpolate（間を取る） - 乱数と揃え
random、snap（刻みに揃える）、shuffle（並べ替え）、distribute（要素ごとに配る） - 単位と色
getUnit、unitize（単位を付ける）、splitColor（色を数の配列に） - 集めると組み合わせ
selector（範囲を絞った探し方）、toArray、pipe（関数をつなぐ） - 回す
wrap（端で反対側へ）、wrapYoyo（端で折り返す）
どれも gsap.utils.clamp() のように呼ぶ、登録の要らない純粋な関数です。動きの設定の中、ScrollTrigger や Observer の呼び返し、GSAP を動かす普通の JavaScript のどこでも使えます。
値を省くと関数が返る
本文がいちばん強調しているのはこの書き方です。多くの道具は、変えたい値を最後の引数に取り、それを省くと「あとで値を受け取る関数」を返します。
値を渡す
clamp(0, 100, 150) はその場で 100 を返す
値を省く
clamp(0, 100) は関数を返し、c(150) や c(-10) のようにあとで呼ぶ
マウスの動きやスクロールの処理のように、同じ設定で何度も呼ぶときは関数の形が向く、と書かれています。
random() だけは例外です。値を省くのではなく、最後の引数に true を渡すと関数が返ります。返った関数は引数を取らず、呼ぶたびに新しい乱数を返します。
動きの設定に文字で書く乱数
動きの設定の値に "random(-100, 100, 5)" や "random([red, blue, green])" と文字で書くと、GSAP が対象ごとに評価します。3 つ目の数は刻み（この例では 5 の倍数に揃える）です。
要素ごとに値を配る distribute
distribute() は、要素の並び（または格子）の中の位置に応じて値を配る関数を返します。設定は 7 つで、base（始まりの値）、amount（全体で配る量）、each（1 つごとに足す量）、from（どこから配るか）、grid、axis、ease です。返った関数を動きの設定の値にそのまま渡すと、GSAP が要素ごとに呼びます。
使わないほうがいいとき
GSAP を使っていないコード
clamp や mapRange くらいなら、数行の普通の JavaScript で書けます。このスキルは GSAP の中での使い方の手引きなので、GSAP を入れていないなら入れる理由にはなりません。
緩急の曲線やスクロールの連動そのもの
本文は、組み合わせて使う相手として gsap-core、gsap-timeline、gsap-scrolltrigger を挙げ、CustomEase などの緩急の道具は gsap-plugins にある、と書いています。
動きの基本は gsap-core、スクロールは gsap-scrolltrigger、緩急の曲線は gsap-plugins を見てください。
React の部品の中で要素を探す
selector() は React の ref（.current）も受け取れると書かれています。ただし React での片付けまで含めた書き方は gsap-react の担当です。
注意点
解析で見つかった記述は無い
SKILL.md に、外部との通信、シェルでの実行、ファイルの書き換えの記述はありません。同梱ファイルは無く、SKILL.md 1 枚で完結しています（2026-10-22 時点）。
単位は扱わない
unitize() は、すでに単位が付いている値はそのまま返します（unitize("2rem", "px") は "2rem"）。
説明文に無い道具では呼ばれにくい
スキルが呼ばれるかは、説明文の言葉に左右されます。説明文の引き金の言葉は gsap.utils、clamp、mapRange、random、snap、toArray、wrap などで、distribute や splitColor は入っていません。これらを使いたいときは、依頼文で gsap-utils の名前を出すほうが確実です。
細かい決まり
wrap(min, max)は min を含み、max を含まない（wrap(0, 360, 370)は10）snap()は数の刻みのほか、許される値の配列にも揃えられるsplitColor()は色を[赤, 緑, 青]（透明度があれば 4 つ）に分け、2 つ目にtrueを渡すと色相・彩度・明度で返す- 文書に無い振る舞いに頼らない、と「しないこと」の 2 つ目にある
インストール数の推移
日次で記録9月18日 〜 11月7日（49日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
gsap-core
GSAP の基本（to・from・fromTo、緩急、時間差、既定値）で、正しい動きのコードを書かせる。動きを減らす設定と画面幅での切り替えは matchMedia で。GSAP 公式が出している手引き
gsap-plugins
GSAP のプラグイン（Flip、Draggable、SplitText、MorphSVG、CustomEase など 20 種ほど）を、登録の仕方から正しく使わせる。全部が無料になり公開の npm から入ることも明記していて、古い「有料会員の鍵」の案内をさせない
gsap-scrolltrigger
GSAP の ScrollTrigger でスクロールに連動する動きを書かせる。固定表示、スクロールへの追従、横スクロールの見せかけまで。公式が出している手引き
よくある質問
random() で関数の形にしたいのに、値が返ってきます
random() は、ほかの道具と違って値を省いても関数になりません。最後の引数に true を渡すと関数が返ります（random(-200, 500, 10, true) など）。本文は、これが唯一の例外だと書いています。
スクロールの進み具合を角度に変えるには
mapRange(0, 1, 0, 360) で関数を作り、進み具合（0〜1）を渡すと角度が返ります。刻みに揃えたいなら、pipe() で snap() とつなげます。本文の最善の手も、同じ設定で何度も呼ぶなら関数の形にせよ、と書いています。
toArray と selector はどう違いますか
toArray() は、セレクターの文字列や NodeList などを本物の配列にします。2 つ目の引数で探す範囲を絞れます。selector() は、ある要素の中だけを探す関数を返します。部品の中で、ページ全体ではなくその部品の子だけを選びたいときに使います。
wrap と wrapYoyo はどう違いますか
wrap() は端を越えると反対の端から戻ります（0〜360 で 370 は 10）。wrapYoyo() は端で折り返します（0〜100 で 150 は 50）。行き来する動きに使います。