در GSAP افزونه‌های متنوعی وجود دارد که قابلیت‌های خاص برای انیمیشن فیزیکی، دیباگ و کار با بوم‌های گرافیکی ارائه می‌کنند. گروهی از این پلاگین‌ها تحت عنوان «Other Plugins» شناخته می‌شوند:

Physics2DPlugin – PhysicsPropsPlugin – GSDevTools – EaselPlugin – PixiPlugin

🟢 1️⃣ Physics2DPlugin

شبیه‌سازی حرکت دوبعدی با سرعت اولیه، زاویه و شتاب گرانشی بدون نیاز به فیزیک پیچیده.

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

مثال

<div class="ball"></div>

gsap.registerPlugin(Physics2DPlugin);

gsap.to(".ball", {
  duration: 3,
  physics2D: {
    velocity: 400, // سرعت پیکسل/ثانیه
    angle: -60,    // زاویه پرتاب (درجه)
    gravity: 500   // شتاب جاذبه
  }
});

• پارامترهای دیگر: acceleration, accelerationAngle, friction

🟡 2️⃣ PhysicsPropsPlugin

اعمال قوانین فیزیکی بر روی خواص مشخص یک المان (مثلاً x, y یا rotation).

📌 پریمیوم.

مثال

gsap.to(".box", {
  duration: 2,
  physicsProps: {
    x: { velocity: 200, friction: 0.7 },
    rotation: { velocity: 180, friction: 0.8 }
  }
});

• کنترل مستقل سرعت و اصطکاک برای هر property.

🟠 3️⃣ GSDevTools

رابط دستگاهی (UI) برای دیباگ و کنترل Timelineها. شبیه یک نوار زمان (timeline scrubber).

📌 پریمیوم.

استفاده

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

const tl = gsap.timeline();
tl.to(".box", { x: 300, duration: 2 })
  .to(".circle", { y: 200, duration: 2 });

GSDevTools.create({ animation: tl });

• دکمه‌های Play/Pause، کنترل سرعت، و دیدن Labelها.

🟣 4️⃣ EaselPlugin

انیمیشن سریع روی آبجکت‌های EaselJS (CreateJS).

✅ رایگان و مناسب پروژه‌های HTML5 Canvas که از CreateJS استفاده می‌کنند.

مثال

gsap.to(easelObject, { x: 200, alpha: 0.5, duration: 1 });

• به جای استایل‌های CSS، مستقیماً خواص EaselJS مثل scaleX, rotation را انیمیت می‌کند.

🟤 5️⃣ PixiPlugin

انیمیشن بهینه برای PixiJS (رندر گرافیک WebGL/Canvas).

✅ رایگان، مخصوص پروژه‌های PixiJS.

فعال‌سازی

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

مثال

gsap.to(pixiSprite, {
  duration: 2,
  pixi: {
    scale: 1.5,
    tint: 0xff0000,
    alpha: 0.8
  }
});

• پشتیبانی از خواص مخصوص Pixi مثل tint, brightness, blur.

✅ جدول مقایسه

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

• Physics2D + Draggable = ساخت بازی‌های ساده پرتابی (Angry Birds سبک کوچک).

• PhysicsProps برای افکت‌هایی مثل توپ جهنده یا اینرسی چرخش عالی است.

• GSDevTools در پروژه‌های بزرگ برای تست دقیق Timeline‌ها بسیار مفید است.

• اگر با CreateJS/EaselJS یا PixiJS کار می‌کنید، این پلاگین‌ها کد انیمیشن شما را بسیار کوتاه و بهینه می‌کنند.

این افزونه‌ها قدرت GSAP را فراتر از انیمیشن‌های معمولی CSS و DOM می‌برند و امکان ساخت پروژه‌های تعاملی، بازی‌های کوچک و انیمیشن‌های پیچیده وب‌گرافیک را فراهم می‌کنند.