GSAPのUtilsメソッド紹介

// 通常の使い方：全ての要素に同じ値
gsap.to(".box", { x: 100 }) // すべてのボックスが同じ位置に移動
 
// 関数を返す使い方：各要素に異なる値
gsap.to(".box", {
  x: () => gsap.utils.random(-200, 200), // 各ボックスが異なるランダム位置に移動
})
 
// またはこのように
gsap.to(".box", {
  x: gsap.utils.random(-200, 200, true), // trueで関数として返す
})

// 基本的な使い方
gsap.utils.clamp(0, 100, 150) // 結果: 100 (150は大きすぎるので100に)
gsap.utils.clamp(0, 100, -10) // 結果: 0 (マイナスは0に)
gsap.utils.clamp(0, 100, 50) // 結果: 50 (そのまま)
 
// 実用例：ボックスを画面からはみ出させない
gsap.to(".box", {
  x: 500,
  modifiers: {
    x: gsap.utils.clamp(0, 300), // 0〜300pxの範囲内に制限
  },
})

// 基本的な使い方
// 0〜100の範囲の「50」を、0〜360の範囲に変換すると？
gsap.utils.mapRange(0, 100, 0, 360, 50) // 結果: 180
 
// 実用例：スクロール量を回転角度に変換
window.addEventListener("scroll", () => {
  const scrollY = window.scrollY
  const rotation = gsap.utils.mapRange(0, 1000, 0, 360, scrollY)
  gsap.set(".wheel", { rotation: rotation })
})

// 基本的な使い方
gsap.utils.random(0, 100) // 0〜100のランダムな数
gsap.utils.random(["red", "blue", "green"]) // 配列からランダム選択
 
// 実用例：複数の要素をランダムな位置に
gsap.to(".box", {
  x: () => gsap.utils.random(-200, 200), // 各要素に異なるランダム値
  y: () => gsap.utils.random(-100, 100),
  duration: 1,
})

// 基本的な使い方
gsap.utils.snap(10, 23) // 結果: 20 (10の倍数で一番近い値)
gsap.utils.snap(50, 73) // 結果: 50
gsap.utils.snap([0, 25, 50, 100], 30) // 結果: 25 (配列の中で一番近い値)
 
// 実用例：ドラッグした要素をグリッドに合わせる
gsap.to(".draggable", {
  x: 123,
  modifiers: {
    x: gsap.utils.snap(50), // 50px単位でスナップ
  },
})

// 基本的な使い方
gsap.utils.wrap(0, 100, 150) // 結果: 50 (100を超えた分は最初から数える)
gsap.utils.wrap(0, 100, -10) // 結果: 90
 
// 配列での使用
const colors = ["red", "green", "blue"]
gsap.utils.wrap(colors, 5) // 結果: "blue" (5番目は存在しないので、3番目に戻る)
 
// 実用例：無限に繰り返すアニメーション
gsap.to(".ball", {
  x: 1000,
  duration: 5,
  ease: "none",
  modifiers: {
    x: gsap.utils.wrap(0, 400), // 0〜400pxの範囲でループ
  },
})

// 基本的な使い方
const boxes = gsap.utils.toArray(".box") // class="box"の要素を全て配列に
const items = gsap.utils.toArray("#item1, #item2") // 複数のIDを配列に
 
// 実用例：複数の要素を順番にアニメーション
const elements = gsap.utils.toArray(".item")
gsap.from(elements, {
  y: 50,
  opacity: 0,
  duration: 0.5,
  stagger: 0.2, // 0.2秒ずつずらして実行
})

// 基本的な使い方
gsap.utils.interpolate(0, 100, 0.5) // 結果: 50 (中間地点)
gsap.utils.interpolate("#ff0000", "#0000ff", 0.5) // 赤と青の中間色
 
// 実用例：スクロールに合わせて色を変える
const colorChanger = gsap.utils.interpolate("red", "blue")
window.addEventListener("scroll", () => {
  const progress = window.scrollY / 1000 // スクロール進行度
  const color = colorChanger(progress)
  document.body.style.backgroundColor = color
})

// 基本的な使い方
const colors = ["red", "green", "blue"]
gsap.utils.shuffle(colors)
console.log(colors) // ランダムに並び替えられた配列
 
// 実用例：要素をランダムな順番でアニメーション
const boxes = gsap.utils.toArray(".box")
gsap.utils.shuffle(boxes) // 順番をシャッフル
gsap.from(boxes, {
  scale: 0,
  duration: 0.3,
  stagger: 0.1, // シャッフルされた順番で表示
})

// 基本的な使い方
const transform = gsap.utils.pipe(
  gsap.utils.clamp(0, 100), // まず0〜100に制限
  gsap.utils.mapRange(0, 100, 0, 360), // 次に0〜360度に変換
)
 
const result = transform(150) // 150 → 100 → 360
 
// 実用例：マウス位置を色に変換
const mouseToColor = gsap.utils.pipe(
  gsap.utils.clamp(0, window.innerWidth), // 画面幅に制限
  gsap.utils.mapRange(0, window.innerWidth, 0, 1), // 0〜1に変換
  gsap.utils.interpolate("#ff0000", "#0000ff"), // 色に変換
)
 
document.addEventListener("mousemove", (e) => {
  document.body.style.backgroundColor = mouseToColor(e.clientX)
})

// 基本的な使い方
gsap.utils.normalize(0, 100, 25) // 結果: 0.25 (25%)
gsap.utils.normalize(0, 100, 50) // 結果: 0.5 (50%)
 
// 実用例：プログレスバー
window.addEventListener("scroll", () => {
  const maxScroll = document.body.scrollHeight - window.innerHeight
  const progress = gsap.utils.normalize(0, maxScroll, window.scrollY)
  gsap.set(".progress-bar", { scaleX: progress })
})