در GSAP برای انیمیشن‌های حرفه‌ای روی گرافیک‌های SVG پلاگین‌های اختصاصی وجود دارد که کار با مسیرها (paths) و اشکال را بسیار ساده می‌کنند. چهار پلاگین کلیدی در این حوزه عبارت‌اند از:

DrawSVGPlugin – MorphSVGPlugin – MotionPathPlugin – MotionPathHelper

🟢 1️⃣ DrawSVGPlugin

مسیرهای یک SVG (المان‌های <path> یا شکل‌هایی با stroke) را به تدریج رسم می‌کند.

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

فعال‌سازی

<script src="gsap.min.js"></script>
<script src="DrawSVGPlugin.min.js"></script>

gsap.registerPlugin(DrawSVGPlugin);

مثال ساده

gsap.from("path", { duration: 2, drawSVG: "0% 100%" });

• drawSVG می‌تواند درصد ("0% 50%") یا طول پیکسل باشد.

• امکان انیمیشن رفت‌وبرگشت (yoyo) نیز وجود دارد.

🟡 2️⃣ MorphSVGPlugin

تغییر یک مسیر SVG به مسیر دیگر با انیمیشن روان (morphing).

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

مثال

gsap.to(".shape", {
  duration: 2,
  morphSVG: "M100 10 ...Z"
});

امکانات:

• تبدیل خودکار شکل‌ها حتی اگر تعداد نقاط path متفاوت باشد.

• shapeIndex برای کنترل ترتیب نقاط.

• پشتیبانی از اشکال ساده (مثل دایره، مستطیل) بدون نیاز به path پیچیده.

🟠 3️⃣ MotionPathPlugin

حرکت دادن هر المان (DOM یا SVG) روی مسیر یک path.

✅ این پلاگین رایگان است و در GSAP اصلی موجود است.

مثال

gsap.to(".ball", {
  duration: 4,
  repeat: -1,
  motionPath: {
    path: "#track",
    align: "#track",
    autoRotate: true
  }
});

گزینه‌ها

🟣 4️⃣ MotionPathHelper

ابزار تعامل زنده برای تنظیم مسیر انیمیشن و گرفتن مختصات دقیق.

📌 این پلاگین در نسخه‌های Club GreenSock ارائه می‌شود (یا درون GSDevTools).

استفاده

gsap.registerPlugin(MotionPathPlugin, MotionPathHelper);
MotionPathHelper.create(".ball");

• روی صفحه می‌توانید نقطه‌ها را با موس جابه‌جا کنید و مقادیر جدید مسیر را به دست آورید.

✅ مقایسه و کاربردها

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

• می‌توانید DrawSVG + ScrollTrigger را ترکیب کنید تا رسم خطوط با اسکرول هماهنگ شود.

• MorphSVG به شما اجازه می‌دهد آیکون‌ها را به آیکون‌های دیگر تغییر دهید (مثل منوی همبرگری ↔ دکمه بستن).

• با MotionPath می‌توانید حرکت پارالاکس، مسیرهای چرخشی یا حرکت‌های منحنی دقیق بسازید.

• MotionPathHelper هنگام طراحی تعاملی زمان توسعه را بسیار کم می‌کند.

این چهار پلاگین مجموعه‌ای کامل برای ساخت انیمیشن‌های پیچیده و جذاب SVG در پروژه‌های وب فراهم می‌کنند.