gsap - Starter Templates

در شروع کار با GSAP داشتن یک Starter Template به شما کمک می‌کند سریع یک پروژه آزمایشی یا واقعی را بالا بیاورید.
در ادامه چند نمونه آماده (CDN، NPM و React/Vite) آورده‌ام که می‌توانید مستقیم کپی و استفاده کنید.

🟢 1️⃣ قالب ساده HTML + CDN

مناسب برای تست سریع یا ساخت دموی کوچک.

ساختار پوشه

project/
│─ index.html
│─ style.css  (اختیاری)

index.html

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>GSAP Starter</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <style>
    body { display:flex; justify-content:center; align-items:center; height:100vh; background:#222; }
    .box { width:100px; height:100px; background:coral; }
  </style>
</head>
<body>
  <div class="box"></div>

  <script>
    // انیمیشن ابتدایی
    gsap.to(".box", { x: 200, rotation: 360, duration: 2, repeat: -1, yoyo: true });
  </script>
</body>
</html>

✅ فقط این فایل را باز کنید؛ هیچ نصب اضافی لازم نیست.

🟡 2️⃣ Starter با NPM + Vanilla JS

مناسب وقتی که Node.js و ابزار Build دارید ولی فریم‌ورک خاصی نمی‌خواهید.

مراحل:

mkdir gsap-starter
cd gsap-starter
npm init -y
npm install gsap

index.html

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>GSAP NPM Starter</title>
</head>
<body>
  <div class="box"></div>
  <script type="module" src="main.js"></script>
</body>
</html>

main.js

import { gsap } from "gsap";

gsap.to(".box", { x: 300, rotation: 180, duration: 2 });

  • این را با یک ابزار ساده مثل Vite یا حتی npx serve اجرا کنید.

🟠 3️⃣ Starter با Vite + React

بهترین انتخاب برای پروژه‌های مدرن React.

ایجاد پروژه:

npm create vite@latest gsap-react --template react
cd gsap-react
npm install
npm install gsap

src/App.jsx

import { useEffect, useRef } from "react";
import { gsap } from "gsap";

export default function App() {
  const boxRef = useRef(null);

  useEffect(() => {
    gsap.to(boxRef.current, { x: 200, rotation: 360, duration: 2 });
  }, []);

  return (
    <div style={{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}}>
      <div ref={boxRef} style={{width:100,height:100,background:"coral"}}></div>
    </div>
  );
}

شروع توسعه:

npm run dev

🟣 4️⃣ Starter با ScrollTrigger

اگر قصد استفاده از پلاگین ScrollTrigger را دارید:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".box", {
    x: 400,
    scrollTrigger: {
      trigger: ".box",
      start: "top center",
      scrub: true
    }
  });
</script>

💡 نکات پایانی

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

  • برای پروژه‌های جدی: NPM یا Vite/React را ترجیح دهید تا مدیریت نسخه و build راحت باشد.

  • اگر از فریم‌ورک دیگری (Vue/Angular) استفاده می‌کنید، فقط مراحل NPM مشابه است: npm install gsap و سپس import { gsap } from "gsap";.

این قالب‌ها نقطه شروعی عالی برای یادگیری و تست انیمیشن‌های GSAP هستند.