در GSAP، وقتی می‌خواهید چند المان مشابه را به صورت گروهی و با اختلاف زمانی انیمیت کنید، از Stagger استفاده می‌کنیم.
Stagger باعث می‌شود هر المان به ترتیب یا با تأخیر مشخص شروع به انیمیشن کند.

🟢 1️⃣ Stagger ساده

gsap.to(".box", {
  x: 200,
  duration: 1,
  stagger: 0.2   // هر المان 0.2 ثانیه بعد از قبلی شروع می‌شود
});

• اگر 5 المان با کلاس box. دارید، انیمیشن آن‌ها یکی یکی و با فاصله 0.2 ثانیه اجرا می‌شود.

🟡 2️⃣ Stagger با ترتیب معکوس

gsap.to(".box", {
  y: 100,
  duration: 1,
  stagger: {
    each: 0.2,
    from: "end"   // شروع از آخرین المان
  }
});

گزینه‌های from:

• "start": پیش‌فرض، از اولین المان شروع شود

• "center": از وسط شروع شود

• "edges": از دو سر به سمت مرکز

• "random": المان‌ها به صورت تصادفی شروع شوند

• عدد: index المان شروع

🟠 3️⃣ Stagger پیشرفته با Timeline

می‌توانید Stagger را در Timeline هم استفاده کنید:

const tl = gsap.timeline();

tl.to(".box", {
  y: 100,
  duration: 1,
  stagger: 0.2
}).to(".circle", {
  x: 150,
  duration: 1,
  stagger: { each: 0.3, from: "center" }
});

• همه چیز قابل ترکیب با ease، repeat، yoyo است.

🟣 4️⃣ Stagger با تابع

می‌توانید برای هر المان تأخیر پویا بر اساس index یا عنصر ایجاد کنید:

gsap.to(".box", {
  x: 200,
  duration: 1,
  stagger: function(index, target, array) {
    return index * 0.3;  // فاصله هر المان 0.3 * index
  }
});

• index: شماره المان در NodeList

• target: خود DOM عنصر

• array: آرایه تمام عناصر

🟤 5️⃣ Stagger برای ویژگی‌های مختلف

می‌توانید با keyframes یا timeline ترکیب کنید:

gsap.to(".box", {
  keyframes: [
    { x: 100, backgroundColor: "red" },
    { x: 200, backgroundColor: "blue" }
  ],
  duration: 2,
  stagger: 0.3
});

• هر المان مسیر خودش را دنبال می‌کند و اختلاف زمانی حفظ می‌شود.

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

• می‌توانید Stagger را با repeat و yoyo ترکیب کنید:

gsap.to(".box", { x: 200, duration: 1, stagger: 0.2, repeat: -1, yoyo: true });

• ease را هم می‌توان برای Stagger تعریف کرد:

gsap.to(".box", { x: 200, duration: 1, stagger: 0.2, ease: "elastic.out(1,0.3)" });

✅ خلاصه

Stagger قدرت زیادی برای ساخت انیمیشن‌های گروهی زیبا و طبیعی به شما می‌دهد، مثل ردیف المان‌های کارت، دکمه‌ها، آیکون‌ها و افکت‌های ورود متن.