gsap Cheatsheet

در این Cheatsheet مهم‌ترین متدها، پارامترها و میان‌بُرهای GSAP 3 را یکجا خواهید داشت تا موقع کدنویسی سریع به آن رجوع کنید.

🟢 پایه‌ای‌ترین متدها

متدتوضیحمثال
()gsap.toاز وضعیت فعلی به مقدار جدید انیمیت می‌کندgsap.to(".box", {x:100,duration:1})
()gsap.fromاز مقدار اولیه به وضعیت فعلی می‌آیدgsap.from(".box", {opacity:0,y:-50})
()gsap.fromToمقدار شروع و پایان را مشخص می‌کنیمgsap.fromTo(".box",{x:0},{x:200,duration:2})
()gsap.setبدون انیمیشن، مقادیر را فوراً اعمال می‌کندgsap.set(".box",{scale:0.5})

🟡 پارامترهای پرکاربرد

پارامترکاربردنمونه
durationمدت زمان (ثانیه)duration: 1.5
delayتأخیر شروعdelay: 0.5
repeatتکرار انیمیشنrepeat: 2 یا repeat: -1 (بی‌نهایت)
yoyoبرگشت به حالت اول بعد از هر تکرارyoyo: true
easeنوع شتاب (Easing)ease: "power2.inOut"
staggerفاصله زمانی بین انیمیشن چند عنصرstagger: 0.2

🟠 توابع کنترلی

تابعتوضیح
()pause() / .play.توقف یا پخش دوباره
()reverse.پخش برعکس انیمیشن
()restart.از ابتدا اجرا می‌کند
timeScale(value).تغییر سرعت (۲ یعنی دو برابر سریع‌تر)

مثال:

const anim = gsap.to(".box", {x:300,duration:3});
anim.pause();   // توقف
anim.timeScale(2).play(); // دو برابر سرعت

🟣 Timeline

برای ترتیب و هماهنگی چند انیمیشن:

const tl = gsap.timeline({repeat:1, yoyo:true});

tl.to(".box1", {x:100, duration:1})
  .to(".box2", {y:100, duration:1}, "-=0.5") // شروع زودتر
  .from(".title", {opacity:0, duration:0.5});

  • متدهای مهم: ()add(), .addLabel(), .seek(), .progress..

🟤 پلاگین‌های محبوب

پلاگینکاربرد سریع
ScrollTriggerانیمیشن بر اساس اسکرول
MotionPathPluginحرکت روی مسیر SVG
Draggableدرَگ کردن عناصر
TextPluginانیمیشن متن (تایپ شدن)

مثال ScrollTrigger:

gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
  x:400,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    end: "top 30%",
    scrub: true
  }
});

🟢 انتخاب عناصر

  • CSS Selector: " .class " ، "#id"

  • NodeList/Array: document.querySelectorAll(".item")

  • مستقیم DOM: elementRef (مثلاً در React با useRef)

🟡 ترفندهای پرکاربرد

  • center origin: transformOrigin:"50% 50%"

  • chain easing: ease: "back.out(1.7)"

  • relative values: x:"+=100" (نسبت به موقعیت فعلی)

⚡ یک نمونه جمع‌بندی

const tl = gsap.timeline({repeat:-1, yoyo:true});

tl.from(".title", {opacity:0, y:-50, duration:1, ease:"power2.out"})
  .to(".box", {
      x:200,
      rotation:360,
      duration:2,
      ease:"elastic.out(1,0.3)",
      stagger:0.3
  });

✅ خلاصه

  • gsap.to / from / fromTo: متدهای اصلی.

  • duration, delay, repeat, yoyo, ease: پرکاربردترین پارامترها.

  • Timeline: برای انیمیشن‌های زنجیره‌ای و هماهنگی زمان‌بندی.

  • Plugins: قابلیت‌های قدرتمند مثل ScrollTrigger و MotionPath.

با این Cheatsheet می‌توانید تقریباً همهٔ انیمیشن‌های پایه تا حرفه‌ای GSAP را سریع پیاده‌سازی کنید.