برای زنده‌کردن لوگوها، آیکون‌ها و نمودارهای SVG می‌توان از GSAP به همراه پلاگین‌های اختصاصی آن استفاده کرد. مزیت اصلی این روش، کنترل دقیق مسیرها (path)، امکان ترکیب چند افکت و عملکرد بسیار روان است.

🟢 1. آماده‌سازی SVG

SVG باید قابل‌هدف‌گیری باشد:

• ویژگی stroke برای رنگ خط و "fill="none برای شفاف بودن داخل.

• استفاده از کلاس‌ها یا ID برای انتخاب راحت.

🟡 2. ترسیم مسیر (Draw Effect)

پلاگین DrawSVG (عضویت Club GreenSock) یا روش CSS پیش‌فرض:

// روش عمومی با stroke-dasharray
const path = document.querySelector('.logo-path');
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;

gsap.to(path, { strokeDashoffset: 0, duration: 2, ease: "power1.inOut" });

• strokeDasharray = طول کل مسیر

• انیمیشن تا 0 باعث می‌شود خط به‌تدریج ترسیم شود.

🟠 3. Morphing (تغییر شکل لوگو یا آیکون)

پلاگین MorphSVGPlugin:

gsap.registerPlugin(MorphSVGPlugin);
gsap.to(".shape", {
  duration: 2,
  morphSVG: "M20,20 C...Z",
  ease: "power2.inOut",
  repeat: -1,
  yoyo: true
});

• مسیر مقصد باید تعداد نقاط قابل‌مقایسه داشته باشد (پلاگین خودش هموار می‌کند).

🟤 4. حرکت روی مسیر (Motion Path)

برای حرکت آیکون/دایره روی مسیر:

gsap.registerPlugin(MotionPathPlugin);

gsap.to(".dot", {
  duration: 4,
  repeat: -1,
  yoyo: true,
  ease: "none",
  motionPath: {
    path: "#path",
    align: "#path",
    alignOrigin: [0.5, 0.5]
  }
});

• شیء dot دقیقاً روی مسیر حرکت می‌کند.

🟣 5. افکت نمودار (Chart / Graph)

مثال ستون یا خطی:

gsap.to(".bar", {
  height: 100,
  y: 50,
  duration: 1,
  stagger: 0.2,
  ease: "power2.out"
});

• برای نمودار خطی، همان تکنیک stroke-dashoffset استفاده می‌شود.

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

1. Performance: برای تعداد زیاد path از will-change: transform و کاهش تعداد نقاط استفاده کنید.

2. Timeline: چندین مرحله (ترسیم، رنگ، حرکت) را با یک Timeline هماهنگ کنید.

3. Responsive: از viewBox به‌جای width/height ثابت استفاده کنید تا SVG در همه اندازه‌ها واکنش‌گرا باشد.

4. Hover/Scroll: با ScrollTrigger می‌توانید انیمیشن را فقط هنگام دیدن لوگو فعال کنید.

✅ جمع‌بندی

• ترسیم خطوط: stroke-dasharray یا پلاگین DrawSVG

• Morphing آیکون‌ها: پلاگین MorphSVGPlugin

• حرکت روی مسیر: پلاگین MotionPathPlugin

• نمودارها: تغییر height، y یا strokeDashoffset برای رشد تدریجی

GSAP به‌همراه این پلاگین‌ها، انیمیشن‌های SVG مثل لوگوهای متحرک، آیکون‌های داینامیک و نمودارهای تعاملی را به‌شکل روان و کاملاً کنترل‌پذیر ممکن می‌سازد.