در GSAP (چه روی یک Tween و چه روی Timeline) می‌توانید با متدهای کنترلی، انیمیشن‌ها را در هر لحظه اجرا، متوقف، برعکس، از ابتدا، یا به نقطهٔ خاصی هدایت کنید. مهم‌ترین این متدها عبارت‌اند از:

🎬 متدهای کنترلی اصلی

⚡ تمام این متدها هم برای Tween (تک انیمیشن) و هم Timeline (دنبالهٔ انیمیشن‌ها) قابل استفاده‌اند.

💡 مثال کامل

<div class="box"></div>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="reverse">Reverse</button>
<button id="restart">Restart</button>
<button id="seek">Seek 1s</button>
<button id="half">Progress 50%</button>

const tl = gsap.timeline({ paused: true });

tl.to(".box", { x: 300, duration: 2 })
  .to(".box", { y: 150, duration: 2 });

document.getElementById("play").onclick    = () => tl.play();
document.getElementById("pause").onclick   = () => tl.pause();
document.getElementById("reverse").onclick = () => tl.reverse();
document.getElementById("restart").onclick = () => tl.restart();
document.getElementById("seek").onclick    = () => tl.seek(1);
document.getElementById("half").onclick    = () => tl.progress(0.5);

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

• play(time): می‌توانید زمان شروع را نیز بدهید؛ مثل tl.play(1) تا از ثانیهٔ ۱ اجرا شود.

• reverse(0): اجرای برعکس از ابتدای Timeline.

• با Labels مدیریت راحت‌تر است:

  tl.addLabel("middle", 1);
  tl.seek("middle");
  

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

✅ خلاصه

• play/pause: شروع و توقف

• reverse: پخش برعکس

• restart: اجرای دوباره از ابتدا

• seek(time|label): پرش به زمان/برچسب خاص

• progress(0–1): گرفتن یا تعیین درصد پیشرفت

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