gsap - روش‌های نصب (CDN, NPM, Bundler)

برای استفاده از GSAP (GreenSock Animation Platform)، سه روش متداول برای نصب و راه‌اندازی وجود دارد: CDN، NPM و Bundler.
در ادامه هر روش را همراه با نمونه کد توضیح می‌دهم.

🔹 1️⃣ استفاده از CDN (سریع و بدون نصب)

این روش مناسب تست سریع یا پروژه‌های کوچک است.
فقط کافی است لینک CDN را در فایل HTML قرار دهید:

<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>GSAP CDN Example</title> <!-- لینک CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> </head> <body> <div id="box" style="width:100px;height:100px;background:coral;"></div> <script> gsap.to("#box", { x: 200, rotation: 360, duration: 2 }); </script> </body> </html>

مزایا: سریع، بدون نیاز به نصب یا پیکربندی.
⚠️ معایب: مناسب پروژه‌های کوچک است، کنترل نسخه سخت‌تر است.

🔹 2️⃣ نصب با NPM

مناسب پروژه‌های حرفه‌ای که با Node.js یا فریم‌ورک‌هایی مثل React, Vue, Angular توسعه می‌دهید.

نصب:

npm install gsap

استفاده در پروژه:

import { gsap } from "gsap"; gsap.to(".box", { x: 200, rotation: 360, duration: 2 });
  • در HTML فقط المان را تعریف کنید:

<div class="box" style="width:100px;height:100px;background:coral;"></div>

مزایا: مدیریت نسخه راحت، مناسب پروژه‌های مدرن.
⚠️ معایب: نیازمند Node.js و ابزارهای Build است.

🔹 3️⃣ استفاده با Bundler (Webpack, Vite, Parcel و …)

اگر پروژه‌تان از Bundler استفاده می‌کند (مانند پروژه‌های React/Vue پیشرفته):

نصب:

npm install gsap

ایمپورت در فایل ماژول:

import { gsap } from "gsap"; // مثال انیمیشن gsap.from(".title", { y: -50, opacity: 0, duration: 1 });
  • با ابزار Bundler، GSAP به صورت خودکار در باندل نهایی اضافه می‌شود.

مزایا: بهترین انتخاب برای پروژه‌های بزرگ با Build Pipeline.
⚠️ معایب: نیاز به تنظیمات Bundler (معمولاً در فریم‌ورک‌های مدرن از قبل پیکربندی شده است).

🔹 نکات مهم

  • نسخه: بهتر است نسخه مشخص نصب کنید تا در آپدیت‌های بعدی تغییرات ناخواسته نداشته باشید، مثل:

    npm install gsap@3.12.5
  • Pluginها: بعضی پلاگین‌های GSAP (مثل ScrollTrigger) در خود بسته gsap موجودند:

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

✅ خلاصه

روشمناسب برایمزایانمونه دستور
CDNتست سریع، پروژه‌های کوچکسریع، بدون نصب<script src="...gsap.min.js"></script>
NPMپروژه‌های Node، React، Vue، Angularمدیریت نسخه، یکپارچگی با ابزارهای مدرنnpm install gsap
Bundlerپروژه‌های بزرگ با Webpack/Viteکارایی بالا، مدیریت وابستگی‌هاimport { gsap } from "gsap"

💡 پیشنهاد من:

  • برای نمونه‌سازی سریع: از CDN استفاده کنید.

  • برای پروژه‌های حرفه‌ای و مقیاس بزرگ: حتماً NPM + Bundler را انتخاب کنید.