در GSAP، وقتی پروژه‌های بزرگ یا SPA (Single Page Application) می‌سازید، مدیریت انیمیشن‌ها، منابع و حافظه اهمیت زیادی پیدا می‌کند.
قابلیت‌های Cleanup، Context و Revert برای این کار طراحی شده‌اند تا انیمیشن‌ها به صورت ایمن و قابل کنترل ساخته و پاک شوند.

🟢 1️⃣ GSAP Context

• Context یک محیط محدود برای انیمیشن‌ها است.

• اجازه می‌دهد تمام Tweenها و Timelineهای داخل آن با یک دستور پاک شوند.

• مخصوصاً در React، Vue یا پروژه‌های SPA بسیار مفید است.

ساخت Context

let ctx = gsap.context(() => {
  gsap.to(".box", { x: 200, duration: 1 });
  gsap.to(".circle", { y: 100, duration: 1.5 });
});

• تمام Tweenهای داخل تابع به ctx وابسته‌اند.

• برای پاک کردن:

ctx.revert();  // همه انیمیشن‌ها و استایل‌های تغییر یافته بازگردانده می‌شوند

🟡 2️⃣ Cleanup (پاکسازی منابع)

• در پروژه‌های بزرگ، انیمیشن‌ها اگر پاک نشوند، باعث memory leak می‌شوند.

• با Context یا ()kill می‌توان انیمیشن‌ها را حذف کرد:

const tween = gsap.to(".box", { x: 300, duration: 2 });
// بعداً
tween.kill();  // انیمیشن متوقف و حافظه آزاد می‌شود

• برای Timeline:

const tl = gsap.timeline();
tl.to(".box", { x: 200 });
tl.kill();   // کل Timeline پاک می‌شود

🟠 3️⃣ Revert (بازگرداندن استایل‌ها)

• وقتی از Context استفاده می‌کنید، ()revert تمام تغییرات انیمیشن را برمی‌گرداند.

• این شامل Tweenهای اجرا شده و تغییرات CSS inline می‌شود.

let ctx = gsap.context(() => {
  gsap.to(".box", { x: 200, backgroundColor: "red" });
});

// بعداً
ctx.revert(); // x و backgroundColor به حالت اولیه باز می‌گردند

• این کار برای تعویض صفحات، حذف کامپوننت یا Reset UI بسیار کاربردی است.

🟣 4️⃣ مثال ترکیبی در React / SPA

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

function MyComponent() {
  const boxRef = useRef();

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      gsap.to(boxRef.current, { x: 200, duration: 1 });
    });

    return () => ctx.revert(); // هنگام Unmount، همه انیمیشن‌ها پاک و استایل‌ها برگردانده می‌شوند
  }, []);

  return <div ref={boxRef} className="box"></div>;
}

• بدون Context، باید تک‌تک Tweenها و Timelineها را پاک می‌کردید.

• با Context + Revert، مدیریت بسیار ساده می‌شود.

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

1. Context مخصوص المان‌ها: برای هر بخش یا کامپوننت یک Context بسازید.

2. پاکسازی Timelineها و Tweenها: ()kill یا ()revert جلوگیری می‌کند از memory leak.

3. Stagger و Keyframes: Context آن‌ها را هم پوشش می‌دهد، نیازی به مدیریت جداگانه نیست.

4. بازگشت استایل: Revert فقط Tweenها را نمی‌کشد، بلکه CSS inline تغییر یافته را هم برمی‌گرداند.

✅ جمع‌بندی

با استفاده از Context و Revert، می‌توانید در پروژه‌های بزرگ انیمیشن‌ها را ایمن، قابل کنترل و پاکیزه مدیریت کنید.