مدیریت Timeline‌های تو در تو (Nested Timelines) در GSAP وقتی مهم می‌شود که پروژهٔ شما چندین توالی انیمیشن دارد که باید به صورت هماهنگ و ماژولار کنترل شوند.
GSAP اجازه می‌دهد یک Timeline را داخل دیگری قرار دهید و تمام متدهای کنترلی (play، pause، …) همچنان کار کنند.

🏗️ ساختار پایه

یک Timeline والد (Parent) می‌تواند شامل:

• Tween‌ها (انیمیشن‌های تکی)

• Timeline‌های فرزند (Child Timelines)

const child1 = gsap.timeline()
  .to(".box1", { x: 150, duration: 1 })
  .to(".box1", { y: 100, duration: 1 });

const child2 = gsap.timeline()
  .to(".box2", { x: 200, duration: 1 })
  .to(".box2", { y: 150, duration: 1 });

// قرار دادن در والد
const master = gsap.timeline({ paused: true });
master.add(child1)
      .add(child2, "+=0.5"); // شروع child2 نیم‌ثانیه بعد

• add(childTimeline, position) زمان شروع تایم‌لاین فرزند را مشخص می‌کند ("start", "+=1", "<" و …).

🎛️ کنترل مجزا

هر Timeline (والد یا فرزند) شیء مستقل است:

child1.pause();
child2.progress(0.5);
master.play();

• توقف/اجرا روی والد باعث توقف/اجرای فرزندها هم می‌شود، مگر این‌که خود فرزند متوقف باشد.

🏷️ برچسب‌ها و مدیریت زمان

برای هماهنگی بهتر از Label استفاده کنید:

master.addLabel("part1", 0)
      .addLabel("part2", 2);

master.seek("part2"); // پرش به شروع برچسب دوم

همچنین می‌توانید هنگام اضافه کردن فرزند، برچسب مشخص کنید:

master.add(child1, "part1");
master.add(child2, "part2");

♻️ Reusable Timelines

اگر یک انیمیشن قرار است در چند جا استفاده شود، آن را در یک تابع بسازید:

function createBoxAnim(selector) {
  return gsap.timeline()
            .to(selector, { x: 100, duration: 1 })
            .to(selector, { y: 50,  duration: 1 });
}

const master = gsap.timeline();
master.add(createBoxAnim(".box1"))
      .add(createBoxAnim(".box2"), "<");

این روش کد را تمیز و قابل نگهداری می‌کند.

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

• نسبت سرعت: با ()timeScale می‌توانید سرعت فرزند را تغییر دهید بدون اثر روی والد.

  child1.timeScale(2); // دو برابر سریع‌تر
  

• رویدادها: رویدادهای onComplete، onStart روی هر Timeline مستقل عمل می‌کند.

• Revert/Context: در پروژه‌های بزرگ React/SPA از ()gsap.context برای پاک‌سازی خودکار انیمیشن‌های تو در تو استفاده کنید.

✅ خلاصه

1. ایجاد Timeline فرزند → انیمیشن‌های تکی یا توالی خاص.

2. افزودن به Timeline والد با add(child, position).

3. کنترل مستقل هر Timeline (play, pause, seek, progress).

4. Labels و timeScale برای هماهنگی دقیق.

5. استفاده از توابع سازنده برای انیمیشن‌های تکرارپذیر.

این رویکرد باعث می‌شود حتی با چندین لایه انیمیشن، پروژه ساختارمند، قابل نگهداری و قابل کنترل در لحظه باقی بماند.