این دو پلاگین امکان ساخت انیمیشن‌های UI تعاملی و حرفه‌ای را فراهم می‌کنند:

• Flip: برای جابه‌جایی یا تغییر Layout بدون از دست دادن موقعیت شروع.

• Draggable: برای کشیدن (drag) المان‌ها با ماوس یا لمس، همراه با اینرسی و محدودیت‌ها.

🟢 1. Flip Plugin

وقتی ساختار یا اندازه‌ی یک عنصر تغییر کند (مثلاً کارت از لیست به گرید جابه‌جا شود)، Flip تغییر مکان، اندازه و چرخش را محاسبه کرده و انیمیشن می‌دهد.

نصب

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/Flip.min.js"></script>
<script>
  gsap.registerPlugin(Flip);
</script>

مثال: جابه‌جایی کارت‌ها

<div class="grid" id="grid">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>
<button id="shuffle">Shuffle</button>

const grid = document.getElementById("grid");
document.getElementById("shuffle").addEventListener("click", () => {
  const state = Flip.getState(".card"); // وضعیت اولیه
  // ترتیب DOM را تغییر دهید
  [...grid.children].sort(() => Math.random() - 0.5).forEach(c => grid.appendChild(c));
  Flip.from(state, {
    duration: 0.8,
    ease: "power1.inOut",
    stagger: 0.05
  });
});

• Flip.getState() موقعیت فعلی را ذخیره می‌کند.

• پس از تغییر DOM، Flip.from(state) انتقال نرم ایجاد می‌کند.

🟡 2. Draggable Plugin

برای کشیدن عناصر و حتی اعمال محدودیت‌ها یا اینرسی (مانند اسکرول لمسی).

نصب

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/Draggable.min.js"></script>
<script>
  gsap.registerPlugin(Draggable);
</script>

مثال پایه

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

.box {
  width: 100px; height: 100px;
  background: coral; position: absolute;
}

Draggable.create(".box", {
  type: "x,y",          // امکان حرکت افقی و عمودی
  bounds: window,       // محدودیت به صفحه
  inertia: true,        // حرکت اینرسی (نیاز به InertiaPlugin)
  edgeResistance: 0.7,
  onDrag()   { console.log("x:", this.x, "y:", this.y); },
  onRelease(){ console.log("Released!"); }
});

• bounds می‌تواند یک عنصر والد یا شیء {top, left, width, height} باشد.

• برای اینرسی، پلاگین InertiaPlugin نیاز است (Club GreenSock).

🟠 ترکیب Flip + Draggable

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

1. کارت را Draggable کنید تا کاربر آن را حرکت دهد.

2. هنگام رها کردن، کارت را به جایگاه جدید بچسبانید.

3. از Flip برای انیمیشن بازچینی بقیه کارت‌ها استفاده کنید.

Draggable.create(".card", {
  bounds: "#grid",
  onRelease: function() {
    const state = Flip.getState(".card");
    // محاسبه مکان جدید و تغییر DOM بر اساس مکان drop
    grid.appendChild(this.target); // نمونه ساده
    Flip.from(state, { duration: 0.5, ease: "power2.out" });
  }
});

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

• Performance: هنگام تعداد زیاد عناصر، will-change: transform برای کارت‌ها فعال کنید.

• Flip + ScrollTrigger: می‌توانید هم‌زمان تغییر مکان و واکنش به اسکرول را کنترل کنید.

• Snap: در Draggable می‌توان به نزدیک‌ترین نقطه (grid snapping) قفل کرد:

  Draggable.create(".box", {
    type: "x,y",
    snap: { x: v => Math.round(v/100)*100, y: v => Math.round(v/100)*100 }
  });
  

• Accessibility: برای تعاملات کیبوردی یا حالت‌های بدون ماوس، نقش ARIA و فوکوس را لحاظ کنید.

✅ جمع‌بندی

• Flip برای انیمیشن جابه‌جایی یا تغییر Layout بدون محاسبه دستی مختصات.

• Draggable برای کشیدن/رهاکردن عناصر با محدودیت، اینرسی و اسنپ.

• ترکیب آن‌ها امکان ساخت رابط‌های تعاملی پیچیده مثل مرتب‌سازی کارت‌ها، بُردهای Kanban، گالری‌های کشیدنی و UIهای کاملاً پویا را فراهم می‌کند.