gsap-frameworks

1# GSAP with Vue, Svelte, and Other Frameworks
2 
3## When to Use This Skill
4 
5Apply 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()).
6 
7**Related skills:** For tweens and timelines use **gsap-core** and **gsap-timeline**; for scroll-based animation use **gsap-scrolltrigger**; for React use **gsap-react**.
8 
9## Principles (All Frameworks)
10 
11- **Create** tweens and ScrollTriggers **after** the component’s DOM is available (e.g. onMounted, onMount).
12- **Kill or revert** them in the **unmount** (or equivalent) cleanup so nothing runs on detached nodes and there are no leaks.
13- **Scope selectors** to the component root so `.box` and similar only match elements inside that component, not the rest of the page.
14 
15## Vue 3 (Composition API)
16 
17See `examples/vue/` for a runnable Vite + Vue 3 project demonstrating these patterns.
18 
19Use **onMounted** to run GSAP after the component is in the DOM. Use **onUnmounted** to clean up.
20 
21```javascript
22import { onMounted, onUnmounted, ref } from "vue";
23import { gsap } from "gsap";
24import { ScrollTrigger } from "gsap/ScrollTrigger";
25gsap.registerPlugin(ScrollTrigger); // once per app, e.g. in main.js
26 
27export default {
28  setup() {
29    const container = ref(null);
30    let ctx;
31 
32    onMounted(() => {
33      if (!container.value) return;
34      ctx = gsap.context(() => {
35…