در GSAP، Ticker موتور داخلی انیمیشن است که مسئول به‌روزرسانی تمام Tweenها و Timelineها در هر فریم است.
Lag smoothing یک ویژگی کلیدی است که باعث می‌شود انیمیشن‌ها روان باقی بمانند حتی وقتی فریم‌ها کند می‌شوند (مثلاً هنگام بارگذاری سنگین یا افت فریم).

🟢 1️⃣ Ticker چیست؟

• GSAP به جای استفاده مستقیم از requestAnimationFrame، یک Ticker داخلی دارد.

• هر فریم، Ticker تمام Tweenها و Timelineهای ثبت‌شده را به‌روزرسانی می‌کند.

• شما می‌توانید خودتان هم به Ticker متصل شوید:

gsap.ticker.add((time, deltaTime, frame) => {
  console.log("Time:", time, "Delta:", deltaTime, "Frame:", frame);
});

• پارامترها:

  • time: زمان کل از شروع انیمیشن (ثانیه)

  • deltaTime: مدت زمان بین فریم قبل و حال (ثانیه)

  • frame: شماره فریم جاری

🟡 2️⃣ Lag Smoothing چیست؟

• وقتی فریم‌ها عقب می‌افتند (lag) یا مرورگر کند می‌شود، GSAP مقدار deltaTime واقعی بین فریم‌ها را محاسبه می‌کند.

• این باعث می‌شود انیمیشن‌ها همیشه به موقع حرکت کنند و به جای "پرش"، مقدار جابه‌جایی افزایش یابد تا زمان واقعی حفظ شود.

gsap.to(".box", {
  x: 500,
  duration: 2,
  ease: "power1.out"
});

• حتی اگر مرورگر برای یک لحظه فریم را از دست بدهد، انیمیشن به صورت روان ادامه می‌یابد.

🟠 3️⃣ تغییر سرعت Ticker

می‌توانید سرعت جهانی Ticker را تغییر دهید:

gsap.ticker.timeScale(2);  // دو برابر سریع‌تر
gsap.ticker.timeScale(0.5); // نیمه سرعت

• مشابه Tween.timeScale() ولی روی کل Ticker و همه انیمیشن‌ها اعمال می‌شود.

🟣 4️⃣ استفاده مستقیم از Ticker برای انیمیشن سفارشی

گاهی می‌خواهیم انیمیشن بدون Tween بسازیم:

let x = 0;
gsap.ticker.add(() => {
  x += 2; // هر فریم 2px حرکت
  document.querySelector(".box").style.transform = `translateX(${x}px)`;
});

• GSAP Ticker تضمین می‌کند که حتی با لگ، حرکت سازگار با زمان واقعی باقی بماند.

🟤 5️⃣ خلاصه Lag Smoothing

• بدون lag smoothing: اگر فریم‌ها کند شوند، انیمیشن‌ها پرش دارند یا دیر حرکت می‌کنند.

• با lag smoothing: GSAP محاسبه می‌کند چه مقدار باید حرکت کند تا زمان واقعی حفظ شود، بنابراین حرکت روان است.

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

• GSAP Ticker جایگزین مستقیم requestAnimationFrame می‌شود و بهینه‌تر است.

• می‌توان چندین تابع را به Ticker اضافه کرد و مدیریت آن آسان است:

const tickFunc = (time, deltaTime) => { console.log(time, deltaTime); };
gsap.ticker.add(tickFunc);
gsap.ticker.remove(tickFunc);

• با استفاده از timeScale و lag smoothing می‌توانید سرعت و روان بودن کل انیمیشن‌ها را کنترل کنید.

✅ جمع‌بندی

Ticker + lag smoothing باعث می‌شود انیمیشن‌های GSAP همیشه روان و همگام با زمان واقعی اجرا شوند، حتی در شرایط ناپایدار مرورگر یا بار پردازشی بالا.