در GSAP، Easing تعیین می‌کند که سرعت حرکت در طول انیمیشن چگونه تغییر کند (شروع آرام، پایان سریع و …).
GSAP مجموعه‌ای از easeهای آماده و ابزارهای ساخت custom ease در اختیار شما می‌گذارد.

🟢 1️⃣ استفادهٔ پایه از Ease

هر انیمیشن می‌تواند گزینه‌ی ease داشته باشد:

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

• در مثال بالا، حرکت با شتاب آرام شروع و سریع تمام می‌شود.

🟡 2️⃣ دسته‌بندی Easeهای آماده

in = شروع آرام و پایان سریع
out = شروع سریع و پایان آرام
inOut = هر دو سر نرم

🟠 نمونه کد

gsap.to(".ball", {
  y: 300,
  duration: 2,
  ease: "bounce.out"
});

• توپ می‌افتد و چند بار جهش می‌کند.

🟣 ease های با پارامتر

برخی می‌توانند پارامتر بگیرند:

gsap.to(".box", {
  x: 200,
  duration: 2,
  ease: "elastic.out(1, 0.3)" // (amplitude, period)
});

🟤 ساخت Custom Ease

1. CustomEase با پلاگین

برای منحنی دلخواه، از پلاگین CustomEase استفاده کنید.

گام‌ها

1. اضافه کردن پلاگین (CDN یا نصب از NPM)

   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js"></script>
   

2. ثبت پلاگین

   gsap.registerPlugin(CustomEase);
   

3. تعریف منحنی

   CustomEase.create("myEase", "M0,0 C0.2,1 0.8,0 1,1");
   

4. استفاده

   gsap.to(".box", { x: 300, duration: 2, ease: "myEase" });
   

• رشته‌ی "M0,0 C0.2,1 0.8,0 1,1" مسیر SVG cubic-bezier است (می‌توانید از ابزارهای آنلاین GSAP یا ابزار DevTools استفاده کنید).

2. cubic-bezier ساده (CSS Style)

بدون پلاگین هم می‌توانید یک cubic-bezier استاندارد بسازید:

gsap.to(".circle", {
  x: 200,
  duration: 2,
  ease: "cubic-bezier(0.68,-0.55,0.27,1.55)"
});

• مشابه CSS.

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

• Ease Preview: در سایت رسمی GSAP (easings demo) می‌توانید منحنی‌ها را زنده ببینید.

• می‌توانید ease متفاوت برای هر property بدهید (با keyframes یا timeline پیچیده‌تر).

• defaults برای تایم‌لاین:

  const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } });
  

✅ خلاصه

با انتخاب صحیح ease می‌توانید احساس طبیعی، نرم و حرفه‌ای به انیمیشن‌های GSAP بدهید.