gsap چیست؟

در GSAP (مخفف GreenSock Animation Platform) ما یک کتابخونه‌ی قدرتمند جاوااسکریپتی داریم که برای ساخت انیمیشن‌های روان، حرفه‌ای و واکنش‌گرا استفاده میشه.

با GSAP می‌تونیم روی المان‌های مختلف وب (متن، تصاویر، SVG، Canvas، Three.js و …) انیمیشن‌های جذاب ایجاد کنیم.

🔹 چرا GSAP؟

  • سریع‌تر و روان‌تر از CSS Animation

  • کنترل پیشرفته روی تایم‌لاین و ترتیب انیمیشن‌ها

  • سازگاری با تمام مرورگرهای مدرن

  • مناسب برای پروژه‌های ساده تا انیمیشن‌های پیچیده

🔹 نصب GSAP

۱️⃣ استفاده از CDN

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

۲️⃣ نصب با NPM

npm install gsap

🔹 اولین انیمیشن

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>GSAP Demo</title>
  <style>
    body { background: #111; display: flex; justify-content: center; align-items: center; height: 100vh; }
    .box { width: 100px; height: 100px; background: #00ffcc; }
  </style>
</head>
<body>
  <div class="box"></div>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script>
    gsap.to(".box", {
      x: 300,      // حرکت در محور X
      duration: 2, // مدت زمان (۲ ثانیه)
      rotation: 360, // چرخش کامل
      scale: 1.5   // بزرگ شدن
    });
  </script>
</body>
</html>

🔹 توضیح کد

  • gsap.to() → برای تغییر ویژگی‌های یک المان در طول زمان.

  • x: 300 → جعبه ۳۰۰px به سمت راست حرکت می‌کنه.

  • duration: 2 → کل انیمیشن ۲ ثانیه طول می‌کشه.

  • rotation: 360 → جعبه یک دور کامل می‌چرخه.

  • scale: 1.5 → جعبه ۱.۵ برابر بزرگ میشه.

🎯 نتیجه‌گیری

  • GSAP یک کتابخونه‌ی انیمیشن‌سازی پیشرفته برای جاوااسکریپت هست.

  • خیلی روان‌تر و حرفه‌ای‌تر از CSS Animation عمل می‌کنه.

  • با یه خط کد میشه انیمیشن‌های جذاب و پیچیده ساخت.