gsap-frameworkslisted

# GSAP with Vue, Svelte, and Other Frameworks ## When to Use This Skill Apply when writing or reviewing GSAP code in Vue (or Nuxt), Svelte (or SvelteKit), or other component frameworks that use a lifecycle (mounted/unmounted). For **React** specifically, use **gsap-react** (useGSAP hook, gsap.context()). **Related skills:** For tweens and timelines use **gsap-core** and **gsap-timeline**; for scroll-based animation use **gsap-scrolltrigger**; for React use **gsap-react**. ## Principles (All Frameworks) - **Create** tweens and ScrollTriggers **after** the component’s DOM is available (e.g. onMounted, onMount). - **Kill or revert** them in the **unmount** (or equivalent) cleanup so nothing runs on detached nodes and there are no leaks. - **Scope selectors** to the component root so `.box` and similar only match elements inside that component, not the rest of the page. ## Vue 3 (Composition API) Use **onMounted** to run GSAP after the component is in the DOM. Use **onUnmounted** to clean up. ```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, sta