أطر عمل Gsap

# GSAP مع Vue و Svelte والأطر الأخرى

## متى تستخدم هذه المهارة

تطبق عند كتابة أو مراجعة كود GSAP في Vue (أو Nuxt)، Svelte (أو SvelteKit)، أو أطر المكونات الأخرى التي تستخدم دورة حياة (mounted/unmounted). بالنسبة ل **React** على وجه التحديد، استخدم **gsap-react** (خطاف useGSAP، gsap.context()).

**المهارات ذات الصلة:** بالنسبة ل tweens و timelines، استخدم **gsap-core** و **gsap-timeline**؛ للرسوم المتحركة القائمة على التمرير، استخدم **gsap-scrolltrigger**؛ ل React، استخدم **gsap-react**.

## المبادئ (جميع الأطر)

- **أنشئ** tweens و ScrollTriggers **بعد** أن يصبح DOM المكون متاحا (مثل onMounted، onMount). - **أوقف أو أعد** تشغيلها في عملية تنظيف **unmount** (أو ما يعادلها) حتى لا يعمل أي شيء على العقد المنفصلة ولا توجد تسريبات. - **نطاق المحددات** إلى جذر المكون بحيث تتطابق `.box` وما شابهها مع العناصر داخل هذا المكون فقط، وليس بقية الصفحة.

## Vue 3 (Composition API)

راجع `examples/vue/` للحصول على مشروع Vite + Vue 3 قابل للتشغيل يوضح هذه الأنماط.

استخدم **onMounted** لتشغيل GSAP بعد أن يصبح المكون في DOM. استخدم **onUnmounted** للتنظيف.

```javascript import { onMounted, onUnmounted, ref } from "vue"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); // once per app, e.g. in main.js

export default { setup() { const container = ref(null); let ctx;

onMounted(() => { if (!container.value) return; ctx = gsap.context(() => { gsap.to(".box", { x: 100, duration: 0.6 }); gsap.from(".item", { autoAlpha: 0, y: 20, stagger: 0.1 }); }, container.value); });

onUnmounted(() => { ctx?.revert(); });

return { container }; }, }; ```

- ✅ **gsap.context(scope)** — مرر مرجع الحاوية (مثل `container.value`) كوسيطة ثانية بحيث تكون المحددات مثل `.item` محددة النطاق لهذا الجذر. يتم تتبع جميع الرسوم المتحركة و ScrollTriggers التي تم إنشاؤها داخل رد الاتصال وإعادتها عند استدعاء **ctx.revert()**. - ✅ **onUnmounted** — استدع دائما **ctx.revert()** بحيث يتم إنهاء tweens و ScrollTriggers وإعادة الأنماط المضمنة.

## Vue 3 (script setup)

نفس الفكرة مع `<script setup>` والمراجع:

```javascript <script setup> import { onMounted, onUnmounted, ref } from "vue"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger";

const container = ref(null); let ctx;

onMounted(() => { if (!container.value) return; ctx = gsap.context(() => { gsap.to(".box", { x: 100 }); gsap.from(".item", { autoAlpha: 0, stagger: 0.1 }); }, container.value); });

onUnmounted(() => { ctx?.revert(); }); </script>

<template> <div ref="container"> <div class="box">Box</div> <div class="item">Item</div> </div> </template> ```

## Nuxt 4

> راجع `examples/nuxt/` للحصول على مشروع Nuxt 4 قابل للتشغيل مع تسجيل المكونات الإضافية، والتحميل الكسول، والأنماط الآمنة ل SSR.

استخدم **composable قابل لإعادة الاستخدام** لتسجيل مكونات GSAP الإضافية وأيضا لتحميل المكونات الإضافية التي لا تستخدم على نطاق واسع في تطبيقك بشكل كسول:

```typescript // composables/useGSAP.ts import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger";

const PLUGINS = [ "CSSRulePlugin", "CustomBounce", "CustomEase", "CustomWiggle", "Draggable", "DrawSVGPlugin", "EaselPlugin", "EasePack", "Flip", "GSDevTools", "InertiaPlugin", "MorphSVGPlugin", "MotionPathHelper", "MotionPathPlugin", "Observer", "Physics2DPlugin", "PhysicsPropsPlugin", "PixiPlugin", "ScrambleTextPlugin", "ScrollSmoother", "ScrollToPlugin", "ScrollTrigger", "SplitText", "TextPlugin", ] as const;

type Plugins = (typeof PLUGINS)[number];

// In order to dynamically load all the GSAP plugins const pluginMap = { CustomEase: () => import("gsap/CustomEase"), Draggable: () => import("gsap/Draggable"), CSSRulePlugin: () => import("gsap/CSSRulePlugin"), EaselPlugin: () => import("gsap/EaselPlugin"), EasePack: () => import("gsap/EasePack"), Flip: () => import("gsap/Flip"), MotionPathPlugin: () => import("gsap/MotionPathPlugin"), Observer: () => import("gsap/Observer"), PixiPlugin: () => import("gsap/PixiPlugin"), ScrollToPlugin: () => import("gsap/ScrollToPlugin"), ScrollTrigger: () => import("gsap/ScrollTrigger"), TextPlugin: () => import("gsap/TextPlugin"), DrawSVGPlugin: () => import("gsap/DrawSVGPlugin"), Physics2DPlugin: () => import("gsap/Physics2DPlugin"), PhysicsPropsPlugin: () => import("gsap/PhysicsPropsPlugin"), ScrambleTextPlugin: () => import("gsap/ScrambleTextPlugin"), CustomBounce: () => import("gsap/CustomBounce"), CustomWiggle: () => import("gsap/CustomWiggle"), GSDevTools: () => import("gsap/GSDevTools"), InertiaPlugin: () => import("gsap/InertiaPlugin"), MorphSVGPlugin: () => import("gsap/MorphSVGPlugin"), MotionPathHelper: () => import("gsap/MotionPathHelper"), ScrollSmoother: () => import("gsap/ScrollSmoother"), SplitText: () => import("gsap/SplitText"), } as const;

type PluginMap = typeof plu