🔹 تعریف

خاصیت CSS به اسم will-change به مرورگر میگه این المان قراره تغییر کنه (مثلاً transform یا opacity) تا مرورگر قبل از شروع انیمیشن، اون المان رو آماده کنه و روی GPU بیاره.

این باعث میشه:

• انیمیشن نرم‌تر اجرا بشه.

• لگ و تأخیر اولیه (jank) کمتر بشه.

🔹 استفاده پایه‌ای

مثال ساده با یک باکس:

<div class="box"></div>

<style>
.box {
  width: 100px;
  height: 100px;
  background: tomato;
  will-change: transform, opacity; /* به مرورگر میگیم این دو تغییر می‌کنن */
}
</style>

<script>
gsap.to(".box", { 
  x: 200, 
  opacity: 0.5, 
  duration: 2 
});
</script>

📌 اینجا چون x (که همون transform هست) و opacity تغییر می‌کنن، ما توی CSS گفتیم:

will-change: transform, opacity;

تا مرورگر از قبل آماده GPU کنه.

🔹 نکته مهم ⚠️

استفاده‌ی زیاد از will-change خودش بدون نیاز هم مصرف RAM و GPU رو بالا می‌بره چون مرورگر برای هر المان یک لایه جدا درست می‌کنه.

✅ بهترین حالت:

• روی المان‌هایی استفاده بشه که مطمئنی انیمیشن میشن.

• اگر فقط یک بار انیمیشن اجرا میشه، میشه با GSAP will-change رو قبل از انیمیشن فعال کرد و بعد از انیمیشن برداشت.

🔹 کنترل با GSAP

میشه توی GSAP این خاصیت رو دینامیک ست و حذف کرد:

// قبل از انیمیشن: will-change فعال میشه
gsap.set(".box", { willChange: "transform, opacity" });

gsap.to(".box", { 
  x: 200, 
  opacity: 0.5, 
  duration: 2,
  onComplete: () => {
    // بعد از انیمیشن: حذف will-change برای آزاد کردن منابع
    gsap.set(".box", { willChange: "auto" });
  }
});

📌 این روش حرفه‌ای‌تره چون فقط وقتی لازمه GPU درگیر میشه.

🔹 چه property هایی بهتره با will-change استفاده بشن؟

• transform (x, y, scale, rotate, skew)

• opacity

❌ توصیه نمی‌شه برای:

• top, left, width, height, margin, padding (چون GPU-friendly نیستن)

✅ جمع‌بندی

• will-change به مرورگر میگه: این المان قراره تغییر کنه، آماده باش!

• برای انیمیشن‌های GSAP، بهترین گزینه‌ها: transform و opacity.

• زیاد استفاده کردنش باعث مصرف اضافه حافظه میشه → فقط روی المان‌های لازم فعال کن.

• می‌تونی با GSAP قبل از انیمیشن فعال و بعدش غیرفعال کنی.