در GSAP، پلاگین‌های رابط کاربری (UI Plugins) مجموعه‌ای از ابزارهای قدرتمند برای ساخت تجربه‌های تعاملی و پویا هستند. چهار پلاگین کلیدی عبارت‌اند از:

Flip – Draggable – InertiaPlugin – Observer

🟢 1️⃣ Flip Plugin

ایجاد انیمیشن‌های حالت‌به‌حالت (state change) با کمترین کد؛ وقتی موقعیت یا اندازهٔ المان‌ها تغییر می‌کند، GSAP مسیر انیمیشن بین حالت قدیم و جدید را محاسبه می‌کند.

فعال‌سازی

GSAP 3 به صورت پیش‌فرض آن را دارد:

import { gsap } from "gsap";
import { Flip } from "gsap/Flip";
gsap.registerPlugin(Flip);

مثال

// گرفتن state اولیه
const state = Flip.getState(".card");

// تغییر DOM
document.querySelector(".card").classList.toggle("large");

// انیمیشن به حالت جدید
Flip.from(state, {
  duration: 0.7,
  ease: "power1.inOut"
});

قابلیت‌ها

• پشتیبانی از تغییر اندازه، موقعیت، رنگ، scale

• گزینه‌های absolute, props, simple برای کنترل دقیق

🟡 2️⃣ Draggable

المان‌ها را با کشیدن (drag)، چرخاندن (rotate) یا اسکرول افقی/عمودی قابل جابجایی می‌کند.

فعال‌سازی

import { Draggable } from "gsap/Draggable";
gsap.registerPlugin(Draggable);

مثال ساده

Draggable.create(".box", {
  type: "x,y",
  bounds: ".container",
  inertia: true // با اینرسی (نیاز به InertiaPlugin)
});

امکانات

• پشتیبانی از محورهای x, y, rotation

• محدودیت (bounds) و snapping

• رویدادها: onDrag, onThrowComplete, onPress و …

🟠 3️⃣ InertiaPlugin

ایجاد حرکت با اینرسی طبیعی بعد از رها کردن درگ (شتاب و کاهش سرعت خودکار).

📌 پلاگین Club GreenSock (پریمیوم).

استفاده

Draggable.create(".box", {
  type: "x,y",
  inertia: true,   // فعال‌سازی اینرسی
  throwResistance: 800,
  minDuration: 0.5,
  maxDuration: 2
});

• می‌توان محدودهٔ حرکت و اسنپینگ (Snap) تعریف کرد تا المان بعد از رها شدن در نقاط مشخص بچسبد.

🟣 4️⃣ Observer

شناسایی و واکنش به ورودی‌های کاربر (چرخ اسکرول، لمس، کشیدن، کلیدهای کیبورد) و ایجاد انیمیشن‌های تعاملی.

فعال‌سازی

import { Observer } from "gsap/Observer";
gsap.registerPlugin(Observer);

مثال

Observer.create({
  target: window,
  type: "wheel,touch,pointer",
  onUp: () => console.log("Scroll Up"),
  onDown: () => console.log("Scroll Down"),
  tolerance: 10,
  preventDefault: true
});

قابلیت‌ها

• تشخیص gestureها: up, down, left, right, press, release

• مناسب برای ساخت اسلایدرها، پیمایش افقی/عمودی و کنترل‌های سفارشی

✅ مقایسه سریع

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

• Flip + ScrollTrigger برای انیمیشن جابجایی کارت‌ها هنگام اسکرول عالی است.

• Draggable + Inertia ترکیب محبوب برای ساخت اسلایدر کارتی و گالری عکس است.

• با Observer می‌توانید سیستم ناوبری کاملاً سفارشی با ژست‌های لمسی پیاده‌سازی کنید.

• حتماً برای پروژه‌های بزرگ از ()gsap.context و ()ScrollTrigger.refresh جهت مدیریت و cleanup استفاده کنید.

این چهار پلاگین مجموعه‌ای کامل برای ساخت رابط‌های کاربری تعاملی و روان با GSAP را فراهم می‌کنند.