در GSAP، Callbacks به شما امکان می‌دهند روی رویدادهای انیمیشن کنترل دقیق داشته باشید؛ مانند شروع، پایان، توقف یا هر آپدیت لحظه‌ای.
این قابلیت بسیار کاربردی است برای تعامل با DOM، صدا، شمارنده و رفتارهای پویا در حین انیمیشن.

🟢 1️⃣ انواع Callbackهای اصلی

🟡 2️⃣ مثال پایه

gsap.to(".box", {
  x: 300,
  duration: 2,
  onStart: () => console.log("انیمیشن شروع شد"),
  onUpdate: () => console.log("در حال حرکت"),
  onComplete: () => console.log("انیمیشن پایان یافت")
});

• onUpdate برای مثال می‌تواند موقعیت المان را خوانده یا بروزرسانی کند.

🟠 3️⃣ استفاده در Timeline

Callbackها می‌توانند روی Timeline یا Tween جداگانه اعمال شوند:

const tl = gsap.timeline({
  onStart: () => console.log("Timeline شروع شد"),
  onComplete: () => console.log("Timeline پایان یافت")
});

tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 50, duration: 1, onComplete: () => console.log("box2 تمام شد") });

• می‌توانید Callbackها را همزمان روی کل Timeline و هم روی هر Tween تعریف کنید.

🟣 4️⃣ استفاده از this در Callback

در داخل Callback می‌توانید به Tween یا Timeline جاری دسترسی داشته باشید:

gsap.to(".box", {
  x: 200,
  duration: 2,
  onComplete: function() {
    console.log("عرض box:", this.targets()[0].offsetWidth);
  }
});

• this.targets() تمام عناصر انیمیشن را برمی‌گرداند.

🟤 5️⃣ ترکیب با Repeat و Yoyo

gsap.to(".ball", {
  x: 400,
  duration: 1,
  repeat: 2,
  yoyo: true,
  onRepeat: () => console.log("تکرار شد"),
  onComplete: () => console.log("تمام شد")
});

• onRepeat بعد از هر بار تکرار و قبل از yoyo اجرا می‌شود.

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

• می‌توانید Callbackها را با Timeline ترکیب کنید تا کنترل کامل روی تمام انیمیشن‌ها داشته باشید.

• برای آپدیت لحظه‌ای DOM یا اندازه‌گیری موقعیت‌ها، از onUpdate استفاده کنید.

• Context-aware callbacks: داخل توابع معمولاً this اشاره به Tween یا Timeline دارد، پس می‌توانید داده‌ها و المان‌ها را دستکاری کنید.

• می‌توان از arrow function استفاده کرد، ولی در این صورت this دیگر Tween را نشان نمی‌دهد.

✅ جمع‌بندی

Callbacks ابزار مهمی برای کنترل تعامل، بروزرسانی، اجرای صدا یا جلوه‌های جانبی در حین انیمیشن‌ها هستند.