در کنار React، کتابخانه‌ی GSAP به‌خوبی با بیشتر فریم‌ورک‌ها و کتابخانه‌های مدرن جاوااسکریپت کار می‌کند. چون GSAP وابستگی خاصی به ساختار DOM ندارد و فقط نیاز دارد که المان‌های هدف در زمان اجرای انیمیشن در صفحه موجود باشند، می‌توانید تقریباً در هر محیطی از آن استفاده کنید.

🔹 Vue.js

نصب:

npm install gsap

استفاده در Composition API

<template>
  <div ref="box" class="box"></div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from "vue";
import gsap from "gsap";

const box = ref(null);
let ctx;

onMounted(() => {
  ctx = gsap.context(() => {
    gsap.to(box.value, { x: 200, duration: 1 });
  });
});

onBeforeUnmount(() => ctx.revert());
</script>

• در Vue 3 می‌توانید از onMounted و onBeforeUnmount استفاده کنید.

• برای پروژه‌های بزرگ توصیه می‌شود از gsap.context برای پاک‌سازی خودکار بهره بگیرید.

🔹 Svelte

Svelte به‌صورت پیش‌فرض DOM را بعد از mount ایجاد می‌کند، بنابراین کافی است از lifecycle خودش استفاده کنید:

<script>
  import { onMount } from "svelte";
  import gsap from "gsap";

  let box;
  onMount(() => {
    gsap.to(box, { x: 150, duration: 1 });
  });
</script>

<div bind:this={box} class="box"></div>

• به دلیل بازسازی سریع DOM در Svelte، بهتر است انیمیشن‌ها را در onMount آغاز کنید.

🔹 Angular

Angular از ساختار کلاسیک Component برخوردار است.

1. نصب:

   npm install gsap
   

2. استفاده در کامپوننت:

   import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
   import gsap from 'gsap';
   
   @Component({
     selector: 'app-anim',
     template: `<div #box class="box"></div>`
   })
   export class AnimComponent implements AfterViewInit {
     @ViewChild('box') box!: ElementRef;
   
     ngAfterViewInit() {
       gsap.to(this.box.nativeElement, { x: 200, duration: 1 });
     }
   }
   

• از ngAfterViewInit استفاده کنید تا DOM حاضر باشد.

🔹 Next.js / Remix (SSR)

• کد GSAP باید فقط در سمت Client اجرا شود.

• در Next.js:

  "use client"; // بالای فایل کامپوننت
  import gsap from "gsap";
  import { useEffect, useRef } from "react";
  
  export default function Box() {
    const box = useRef();
    useEffect(() => {
      gsap.to(box.current, { x: 150 });
    }, []);
    return <div ref={box} className="box"></div>;
  }
  

🔹 Three.js

برای انیمیشن پارامترهای سه‌بعدی، GSAP انتخاب محبوبی است:

import gsap from "gsap";

gsap.to(camera.position, { z: 5, duration: 2 });
gsap.to(mesh.rotation, { y: Math.PI * 2, duration: 4, repeat: -1 });

• می‌توانید مختصات دوربین، نور، متریال و غیره را انیمیت کنید.

🔹 jQuery یا Vanilla JS

GSAP با jQuery تضاد ندارد. می‌توانید به راحتی از انتخابگرهای jQuery یا querySelector استاندارد استفاده کنید:

gsap.from(".item", { opacity: 0, y: 50, stagger: 0.2 });

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

1. Plugin Registration:
   قبل از استفاده از پلاگین‌ها (ScrollTrigger، Draggable و …) حتماً gsap.registerPlugin() را فراخوانی کنید.

2. Context/Cleanup:
   در فریم‌ورک‌های SPA، برای جلوگیری از memory leak، همیشه انیمیشن‌ها را هنگام unmount پاک کنید (context.revert() یا lifecycle مناسب).

3. Server-Side Rendering:
   GSAP نیاز به DOM دارد. هر جا که SSR است (Next.js، Nuxt و …) کد انیمیشن را در بخش کلاینت بنویسید.

✅ خلاصه

GSAP به دلیل طراحی مستقل از DOM، با تقریباً همه‌ی فریم‌ورک‌ها و کتابخانه‌های مدرن سازگار است؛ فقط کافی است زمان اجرای انیمیشن بعد از ایجاد عناصر در DOM باشد و در SPAها حتماً پاک‌سازی فراموش نشود.