در GSAP برای انیمیشن روی متن سه پلاگین محبوب وجود دارد: SplitText، ScrambleText و TextPlugin. هر کدام امکانات خاصی برای جلوه‌های تایپی و متنی ارائه می‌دهند.

🟢 1️⃣ SplitText

متن را به حروف، کلمات یا خطوط جداگانه تقسیم می‌کند تا بتوان روی هر بخش به‌طور مستقل انیمیشن اجرا کرد.

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

نصب / فعال‌سازی

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

gsap.registerPlugin(SplitText);

استفاده ساده

<h1 class="title">Hello GSAP</h1>

const split = new SplitText(".title", { type: "chars" }); // تقسیم به حروف
gsap.from(split.chars, {
  opacity: 0,
  y: 50,
  stagger: 0.05
});

گزینه‌های مهم

• "type: "chars", "words", "lines", یا ترکیب "lines,words,chars"

• linesClass: کلاس دلخواه برای خط‌ها

• wordsClass / charsClass: کلاس دلخواه برای کلمات/حروف

🟡 2️⃣ ScrambleText

متن موجود را به شکل کاراکترهای تصادفی نشان می‌دهد و سپس به متن نهایی تبدیل می‌کند (افکت هکری/ماتریکس).

📌 این هم پلاگین Club GreenSock است.

فعال‌سازی

<script src="ScrambleTextPlugin.min.js"></script>

gsap.registerPlugin(ScrambleTextPlugin);

مثال

<div class="hack">Loading...</div>

gsap.to(".hack", {
  duration: 2,
  scrambleText: {
    text: "Access Granted!",
    chars: "XO123",
    revealDelay: 0.5,
    speed: 0.3
  }
});

گزینه‌های کاربردی

🟠 3️⃣ TextPlugin

متن یک المان را به آرامی از مقدار اولیه به مقدار نهایی تغییر می‌دهد.
(برای تغییر سادهٔ متن یا تایپ تدریجی.)

نصب / فعال‌سازی

<script src="TextPlugin.min.js"></script>

gsap.registerPlugin(TextPlugin);

مثال ساده

<div class="typing"></div>

gsap.to(".typing", {
  duration: 2,
  text: "Hello World!"
});

• می‌تواند تگ‌های HTML (مثل <strong>) را نیز حفظ کند.

• با ease یا stagger هم قابل ترکیب است.

✅ مقایسه سریع

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

• می‌توانید SplitText + Timeline را ترکیب کنید تا ترتیب انیمیشن حروف دقیق باشد.

• با ScrollTrigger یا ScrollSmoother به‌راحتی انیمیشن‌های اسکرولی متن بسازید.

• اگر پروژه رایگان است و دسترسی Club ندارید، TextPlugin برای تایپ ساده و تدریجی کفایت می‌کند.

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