در GSAP مفهوم اصلی انیمیشن Tween است؛ یعنی انتقال تدریجی ویژگی‌ها از یک مقدار به مقدار دیگر.
سه متد اصلی برای ساخت Tween وجود دارد: to()، ()from و ()fromTo.

🟢 1️⃣ ()gsap.to

عنصر را از وضعیت فعلی به مقدار جدید منتقل می‌کند.

gsap.to(".box", {
  x: 200,
  rotation: 360,
  duration: 2,
  ease: "power2.out"
});

• در این مثال، .box از مکان فعلی‌اش تا 200px در محور x جابه‌جا و 360 درجه می‌چرخد.

✅ کاربرد: وقتی می‌خواهید از حالت فعلی (همان چیزی که در CSS یا HTML است) به یک وضعیت جدید بروید.

🟡 2️⃣ ()gsap.from

برعکس ()to. عنصر را از یک مقدار شروعی به وضعیت فعلی (که در CSS تعریف شده) می‌آورد.

gsap.from(".title", {
  opacity: 0,
  y: -50,
  duration: 1
});

• عنوان در ابتدا شفاف و 50px بالاتر است و سپس به حالت عادی (opacity:1 و y:0) انیمیت می‌شود.

✅ کاربرد: انیمیشن ورود (fade-in, slide-in)؛ جایی که المان ابتدا دیده نمی‌شود یا در جای دیگری است.

🟠 3️⃣ ()gsap.fromTo

شروع و پایان را هر دو مشخص می‌کنیم.

gsap.fromTo(".circle",
  { scale: 0, opacity: 0 },   // وضعیت شروع
  { scale: 1, opacity: 1, duration: 1.5, ease: "elastic.out(1,0.3)" } // پایان
);

• صرف‌نظر از مقدار فعلی CSS، GSAP دایره را از scale صفر به یک بزرگ می‌کند.

✅ کاربرد: وقتی می‌خواهید کنترل کامل بر هر دو حالت شروع و پایان داشته باشید.

⚡ پارامترهای مشترک

• duration: مدت زمان انیمیشن (بر حسب ثانیه)

• delay: تأخیر قبل از شروع

• repeat: تعداد تکرار (برای بی‌نهایت: -1)

• yoyo: برگشت به حالت اول بعد از هر تکرار (true)

• ease: نوع شتاب‌دهی (مثل "power1.inOut")

مثال:

gsap.to(".box", { x: 300, duration: 2, repeat: -1, yoyo: true, ease: "bounce.out" });

🔗 ترکیب در Timeline

این متدها می‌توانند در Timeline هم استفاده شوند:

const tl = gsap.timeline();
tl.from(".header", {y:-50, opacity:0, duration:0.5})
  .to(".box", {x:200, duration:1})
  .fromTo(".footer", {opacity:0}, {opacity:1, duration:0.5});

• ترتیب و زمان‌بندی را کاملاً کنترل می‌کنید.

✅ خلاصه

با شناخت این سه متد، هستهٔ اصلی GSAP را یاد گرفته‌اید و می‌توانید تقریباً هر نوع انیمیشن پایه تا حرفه‌ای را بسازید.