انیمیشن‌ها در وب دو جور اجرا میشن:

1. روی CPU (کندتر، مخصوصاً وقتی تعداد زیادی المان انیمیت میشن)

2. روی GPU (خیلی سریع‌تر و روان‌تر)

با استفاده از چند تکنیک می‌تونیم به مرورگر کمک کنیم انیمیشن‌ها رو بهینه‌تر اجرا کنه.

🔹 ۱. استفاده از transform به‌جای top/left

تغییر دادن top یا left باعث reflow و repaint توی صفحه میشه (کل صفحه دوباره محاسبه و رندر میشه).
ولی transform: translate روی یک لایه‌ی جدا (GPU) اجرا میشه و خیلی سریع‌تره.

// ✅ روش بهینه
gsap.to(".box", { x: 200, duration: 1 });

// ❌ روش کندتر
gsap.to(".box", { left: 200, duration: 1 });

📌 همیشه برای جابجایی از x و y استفاده کن.

🔹 ۲. استفاده از opacity به‌جای display/visibility

اگر فقط می‌خوای المان محو بشه، استفاده از opacity بهینه‌تره.

// ✅ سریع و GPU-friendly
gsap.to(".box", { opacity: 0, duration: 1 });

// ❌ کندتر
gsap.to(".box", { display: "none" });

📌 چون تغییر display و visibility باعث محاسبه دوباره DOM میشه.

🔹 ۳. استفاده از will-change در CSS

با خاصیت CSS will-change می‌تونی به مرورگر بگی چه چیزی قراره تغییر کنه، تا زودتر اون رو آماده GPU کنه.

.box {
  will-change: transform, opacity;
}

📌 این باعث میشه انیمیشن‌ها نرم‌تر و بدون لگ اجرا بشن.

🔹 ۴. فعال‌سازی GPU با translateZ(0) یا force3D

گاهی برای اطمینان از اینکه مرورگر GPU استفاده می‌کنه، میشه از translateZ(0) یا force3D:true استفاده کرد.

// روش اول
gsap.set(".box", { z: 0 }); // همون translateZ(0)

// روش دوم
gsap.to(".box", { x: 200, duration: 1, force3D: true });

📌 این ترفند باعث میشه مرورگر برای اون المان یک لایه‌ی سه‌بعدی بسازه.

🔹 ۵. کاهش تعداد انیمیشن‌های همزمان

هرچه تعداد انیمیشن‌های فعال بیشتر باشه، مصرف منابع بالاتر میره.
پس:

• فقط المان‌های ضروری رو انیمیت کن.

• انیمیشن‌های تزیینی زیاد (مثل سایه‌ها یا border-radius) رو کمتر استفاده کن.

🔹 ۶. انتخاب property مناسب

• سریع و GPU-friendly → transform (x, y, scale, rotation, skew) + opacity

• کند و CPU-heavy → width, height, top, left, margin, padding

مثال مقایسه:

// ✅ بهینه: استفاده از scale
gsap.to(".box", { scale: 1.5, duration: 1 });

// ❌ کندتر: تغییر width/height
gsap.to(".box", { width: 300, height: 300, duration: 1 });

🔹 ۷. مثال ترکیبی – انیمیشن بهینه با GPU

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

<style>
.box {
  width: 100px;
  height: 100px;
  background: red;
  position: absolute;
  top: 100px;
  left: 100px;
  will-change: transform, opacity; /* آماده‌سازی برای GPU */
}
</style>

<script>
gsap.to(".box", {
  x: 300,          // حرکت روی محور X (GPU)
  y: 150,          // حرکت روی محور Y (GPU)
  scale: 1.5,      // بزرگ شدن (GPU)
  opacity: 0.5,    // محو شدن (GPU)
  duration: 2,
  ease: "power2.out",
  force3D: true    // اجبار به استفاده از GPU
});
</script>

📌 در این مثال:

• تمام property ها (x, y, scale, opacity) GPU-friendly هستن.

• با will-change مرورگر از قبل آماده‌ست.

• force3D تضمین می‌کنه انیمیشن رو GPU انجام بده.

✅ جمع‌بندی

• از transform و opacity استفاده کن → سریع‌تر و GPU-friendly.

• از تغییر top, left, width, height پرهیز کن → کند و CPU-heavy.

• از will-change و translateZ(0)/force3D برای آماده‌سازی GPU استفاده کن.

• تعداد انیمیشن‌های همزمان رو مدیریت کن تا مصرف منابع پایین بمونه.