در GSAP می‌توانید تقریباً هر چیزی را انیمیت کنید؛ چه ویژگی‌های CSS، چه Attributes (ویژگی‌های HTML/SVG) و حتی مقادیر آرایه‌ای.
این راهنمای خلاصه، مهم‌ترین نکات هر بخش را پوشش می‌دهد.

🟢 1️⃣ ویژگی‌های CSS

GSAP می‌تواند بیشتر خصوصیات CSS که عدد یا رنگ هستند را متحرک کند.

مثال پایه

gsap.to(".box", {
  x: 200,            // برابر translateX
  y: 100,
  rotation: 360,
  scale: 1.5,
  opacity: 0.5,
  backgroundColor: "coral",
  borderRadius: "50%",
  duration: 2
});

نکات

• واحدها: برای px لازم نیست px بنویسید (به طور پیش‌فرض px است). برای واحد دیگر (مثل %, em) باید ذکر کنید:

  gsap.to(".box", { width: "80%" });
  

• transformOrigin: نقطهٔ مبنا برای چرخش یا مقیاس:

  gsap.to(".box", { rotation: 45, transformOrigin: "50% 50%" });
  

• رنگ‌ها: می‌توان از نام رنگ، hex، rgb/rgba یا hsl استفاده کرد.

🟡 2️⃣ Attributes (ویژگی‌های HTML/SVG)

برای انیمیت ویژگی‌های HTML یا SVG که CSS نیستند (مثلاً x, y, viewBox, stroke-dasharray) از گزینه‌ی attr استفاده می‌کنیم.

مثال HTML/SVG

gsap.to("#myCircle", {
  attr: { cx: 150, r: 40 },  // جابه‌جایی و تغییر شعاع
  duration: 2,
  ease: "power1.inOut"
});

• شما می‌توانید چندین ویژگی را داخل attr قرار دهید.

• برای تصاویر یا لینک‌ها:

  gsap.to("img", { attr: { src: "new-image.jpg" }, duration: 1 });
  

🟠 3️⃣ آرایه (Array) از مقادیر

گاهی می‌خواهید یک ویژگی در طول انیمیشن بین چند مقدار حرکت کند.
GSAP به صورت خودکار بین عناصر آرایه interpolate می‌کند.

مثال

gsap.to(".ball", {
  x: [0, 200, 100],    // ابتدا 0، سپس 200، در انتها 100
  y: [0, 50, 0],
  duration: 3,
  ease: "none"
});

• به این حالت keyframes هم می‌گویند.

• معادل طولانی‌تر:

  gsap.to(".ball", {
    keyframes: [
      { x: 200, y: 50, duration: 1 },
      { x: 100, y: 0, duration: 2 }
    ]
  });
  

🟣 ترکیب ویژگی‌ها

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

gsap.to("#star", {
  x: [0, 150, 50],
  attr: { points: "50,15 90,80 10,80" },
  fill: ["red", "yellow", "lime"],
  duration: 4,
  repeat: -1,
  yoyo: true
});

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

• واحد نسبی: "+=100" یا " -=50%" برای حرکت نسبی.

• function-based values: می‌توانید به‌جای مقدار ثابت، تابع بدهید تا بر اساس هر المان محاسبه شود:

  gsap.to(".item", {
    x: i => i * 50,     // هر آیتم 50px بیشتر از قبلی
    duration: 1
  });
  

• CSS Variables: اگر از --custom-color استفاده می‌کنید:

  gsap.to(".box", { "--custom-color": "purple" });
  

✅ خلاصه

با این سه قابلیت، GSAP می‌تواند تقریباً هر خصوصیت بصری (و حتی مقادیر محاسباتی پیچیده) را روان و دقیق انیمیت کند.