انیمیشن‌های UI یکی از پرکاربردترین موارد استفاده‌ی GSAP هستند؛ مثل باز و بسته‌کردن منوهای کشویی، نمایش مودال‌ها و افکت روی کارت‌ها. با Timeline، stagger و پلاگین‌هایی مثل ScrollTrigger یا Flip می‌توان این انیمیشن‌ها را تمیز و قابل‌کنترل پیاده کرد.

🟢 1. منو (Navigation Drawer / Burger Menu)

ساختار

<button class="menu-btn">☰</button>
<nav class="menu">
  <a>Home</a>
  <a>About</a>
  <a>Contact</a>
</nav>

استایل پایه

.menu {
  position: fixed;
  top: 0; right: 0;
  width: 200px; height: 100%;
  background: #333;
  transform: translateX(100%);
}
.menu a { display: block; color: #fff; padding: 1rem; }

GSAP

const menu = document.querySelector('.menu');
const links = document.querySelectorAll('.menu a');
const tlMenu = gsap.timeline({ paused: true, reversed: true });

tlMenu
  .to(menu, { x: '-100%', duration: 0.5, ease: "power2.out" })
  .from(links, { x: 50, opacity: 0, stagger: 0.1 }, "<");

document.querySelector('.menu-btn').addEventListener('click', () => {
  tlMenu.reversed() ? tlMenu.play() : tlMenu.reverse();
});

• Timeline برعکس می‌شود تا هم باز و هم بسته کردن را کنترل کند.

🟡 2. مودال (Modal / Dialog)

ساختار

<button id="open">Open Modal</button>
<div class="overlay">
  <div class="modal">
    <h2>Title</h2>
    <p>Content...</p>
    <button id="close">Close</button>
  </div>
</div>

استایل پایه

.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; justify-content: center; align-items: center;
  opacity: 0; pointer-events: none;
}
.modal { background: white; padding: 2rem; border-radius: 1rem; scale: 0.8; }

GSAP

const overlay = document.querySelector('.overlay');
const modal   = document.querySelector('.modal');

const tlModal = gsap.timeline({ paused: true });
tlModal
  .to(overlay, { opacity: 1, duration: 0.3, pointerEvents: "auto" })
  .to(modal,   { scale: 1, opacity: 1, duration: 0.4, ease: "back.out(1.7)" }, "<");

document.getElementById('open').onclick  = () => tlModal.play();
document.getElementById('close').onclick = () => tlModal.reverse();

• استفاده از pointerEvents برای فعال/غیرفعال کردن کلیک‌ها.

🟠 3. کارت (Hover / Flip Card)

ساختار

<div class="card">
  <div class="card-inner">
    <div class="front">Front</div>
    <div class="back">Back</div>
  </div>
</div>

استایل پایه

.card {
  width: 200px; height: 260px;
  perspective: 800px;
}
.card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.front, .back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  background: coral; color: #fff;
}
.back { transform: rotateY(180deg); background: teal; }

GSAP (هاور)

const cardInner = document.querySelector('.card-inner');

document.querySelector('.card').addEventListener('mouseenter', () => {
  gsap.to(cardInner, { rotateY: 180, duration: 0.6, ease: "power2.inOut" });
});
document.querySelector('.card').addEventListener('mouseleave', () => {
  gsap.to(cardInner, { rotateY: 0, duration: 0.6, ease: "power2.inOut" });
});

• حرکت سه‌بعدی روان و قابل‌کنترل.

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

1. Timeline مرکزی: برای چند منو یا چندین مودال از یک Master Timeline استفاده کنید تا همه به‌صورت هماهنگ کنترل شوند.

2. Stagger: در منو یا لیست کارت‌ها، از stagger برای انیمیشن دنباله‌دار استفاده کنید.

3. Flip Plugin: برای جابه‌جایی کارت‌ها یا تغییر Layout در ریسپانسیو بهترین گزینه است.

4. Accessibility: در مودال، فوکوس‌گیری کیبورد و نقش ARIA را فراموش نکنید.

5. React/Vue/Svelte: همین منطق را در lifecycle مناسب یا هوک useGSAP قرار دهید.

✅ جمع‌بندی

• منو: از Timeline معکوس برای باز/بسته کردن روان استفاده کنید.

• مودال: Overlay و مقیاس‌دهی (scale) برای حس ظاهر شدن طبیعی.

• کارت: چرخش سه‌بعدی با rotateY یا استفاده از Flip Plugin برای افکت‌های پیشرفته.

GSAP با این الگوها می‌تواند تقریباً هر انیمیشن UI را روان، کنترل‌پذیر و واکنش‌گرا بسازد.