در GSAP، Snapping به شما اجازه می‌دهد مقادیر انیمیشن را به نزدیک‌ترین گام (step) مشخص یا مقادیر دلخواه) بچسبانید، تا حرکت دقیق‌تر، گسسته یا منظم باشد.
این قابلیت معمولاً با modifiers و توابع کمک‌کننده مانند ()gsap.utils.snap استفاده می‌شود.

🟢 1️⃣ تابع پایه snap

GSAP یک تابع آماده برای Snap دارد:

gsap.utils.snap(step, value)

• step: فاصله یا آرایه مقادیر مجاز

• value: مقدار ورودی

• خروجی: نزدیک‌ترین مقدار مجاز به value

🟡 2️⃣ Snapping با مقدار ثابت (Step)

فرض کنید می‌خواهیم المان در هر 50px بچسبد:

gsap.to(".box", {
  x: 345,   // مقدار اولیه دلخواه
  duration: 2,
  modifiers: {
    x: gsap.utils.snap(50)   // چسباندن به نزدیک‌ترین مضرب 50
  }
});

• خروجی: x = 0, 50, 100, 150, …, 350

• مقدار واقعی به نزدیک‌ترین مضرب 50 گرد می‌شود.

🟠 3️⃣ Snapping به آرایه مقادیر

می‌توانیم لیست خاصی از مقادیر را تعریف کنیم:

const positions = [0, 75, 150, 225, 300];

gsap.to(".box", {
  x: 123,
  duration: 2,
  modifiers: {
    x: gsap.utils.snap(positions)  // نزدیک‌ترین مقدار در آرایه
  }
});

• خروجی: x = 150 (نزدیک‌ترین مقدار به 123 در آرایه)

🟣 4️⃣ Snapping با Modifier در حرکت پویا

می‌توانیم Snap را با انیمیشن پویا یا Stagger ترکیب کنیم:

gsap.to(".ball", {
  x: "random(0,400)",   // موقعیت تصادفی
  duration: 1,
  modifiers: {
    x: gsap.utils.snap(50)
  },
  stagger: 0.2
});

• هر توپ به نزدیک‌ترین 50px می‌چسبد، حتی اگر مقدار تصادفی باشد.

🟤 5️⃣ ترکیب با Rotation یا Scale

gsap.to(".wheel", {
  rotation: 123,    // هر مقداری
  duration: 2,
  modifiers: {
    rotation: gsap.utils.snap(90)   // چرخش همیشه مضرب 90 درجه
  },
  repeat: -1
});

• این روش عالی برای چرخش گسسته یا چرخ فلک‌ها است.

⚡ نکات حرفه‌ای

• Stagger + Snap: می‌توان انیمیشن گروهی با چسبندگی منظم ایجاد کرد.

• Modifier + Snap: همزمان با انیمیشن، مقادیر را اصلاح می‌کند و نیاز به onUpdate ندارد.

• Custom Snap: می‌توانید تابع دلخواه بدهید:

modifiers: {
  x: x => Math.round(x / 37) * 37
}

• این تقریباً همان کاری است که ()gsap.utils.snap انجام می‌دهد.

✅ جمع‌بندی

Snapping به شما امکان می‌دهد حرکت‌ها را منظم، گسسته و قابل پیش‌بینی کنید، بدون پیچیدگی زیاد و با ترکیب ساده با سایر قابلیت‌های GSAP.