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()).
\nRelated skills: For tweens and timelines use gsap-core and gsap-timeline; for scroll-based animation use gsap-scrolltrigger; for React use gsap-react.
\n.box and similar only match elements inside that component, not the rest of the page.See examples/vue/ for a runnable Vite + Vue 3 project demonstrating these patterns.
Use onMounted to run GSAP after the component is in the DOM. Use onUnmounted to clean up.
\nimport { onMounted, onUnmounted, ref } from \"vue\";\nimport { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\ngsap.registerPlugin(ScrollTrigger); // once per app, e.g. in main.js\n\nexport default {\n setup() {\n const container = ref(null);\n let ctx;\n\n onMounted(() => {\n if (!container.value) return;\n ctx = gsap.context(() => {\n gsap.to(\".box\", { x: 100, duration: 0.6 });\n gsap.from(\".item\", { autoAlpha: 0, y: 20, stagger: 0.1 });\n }, container.value);\n });\n\n onUnmounted(() => {\n ctx?.revert();\n });\n\n return { container };\n },\n};\ncontainer.value) as the second argument so selectors like .item are scoped to that root. All animations and ScrollTriggers created inside the callback are tracked and reverted when ctx.revert() is called.Same idea with <script setup> and refs:
<script setup>\nimport { onMounted, onUnmounted, ref } from \"vue\";\nimport { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\nconst container = ref(null);\nlet ctx;\n\nonMounted(() => {\n if (!container.value) return;\n ctx = gsap.context(() => {\n gsap.to(\".box\", { x: 100 });\n gsap.from(\".item\", { autoAlpha: 0, stagger: 0.1 });\n }, container.value);\n});\n\nonUnmounted(() => {\n ctx?.revert();\n});\n</script>\n\n<template>\n <div ref=\"container\">\n <div class=\"box\">Box</div>\n <div class=\"item\">Item</div>\n </div>\n</template>\n\n\nSee
\nexamples/nuxt/for a runnable Nuxt 4 project with plugin registration, lazy loading, and SSR-safe patterns.
Use a reusable composable to register GSAP Plugins and also to lazy load Plugins that are not extensively used in your application:
\n// composables/useGSAP.ts\nimport { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\nconst PLUGINS = [\n \"CSSRulePlugin\",\n \"CustomBounce\",\n \"CustomEase\",\n \"CustomWiggle\",\n \"Draggable\",\n \"DrawSVGPlugin\",\n \"EaselPlugin\",\n \"EasePack\",\n \"Flip\",\n \"GSDevTools\",\n \"InertiaPlugin\",\n \"MorphSVGPlugin\",\n \"MotionPathHelper\",\n \"MotionPathPlugin\",\n \"Observer\",\n \"Physics2DPlugin\",\n \"PhysicsPropsPlugin\",\n \"PixiPlugin\",\n \"ScrambleTextPlugin\",\n \"ScrollSmoother\",\n \"ScrollToPlugin\",\n \"ScrollTrigger\",\n \"SplitText\",\n \"TextPlugin\",\n] as const;\n\ntype Plugins = (typeof PLUGINS)[number];\n\n// In order to dynamically load all the GSAP plugins\nconst pluginMap = {\n CustomEase: () => import(\"gsap/CustomEase\"),\n Draggable: () => import(\"gsap/Draggable\"),\n CSSRulePlugin: () => import(\"gsap/CSSRulePlugin\"),\n EaselPlugin: () => import(\"gsap/EaselPlugin\"),\n EasePack: () => import(\"gsap/EasePack\"),\n Flip: () => import(\"gsap/Flip\"),\n MotionPathPlugin: () => import(\"gsap/MotionPathPlugin\"),\n Observer: () => import(\"gsap/Observer\"),\n PixiPlugin: () => import(\"gsap/PixiPlugin\"),\n ScrollToPlugin: () => import(\"gsap/ScrollToPlugin\"),\n ScrollTrigger: () => import(\"gsap/ScrollTrigger\"),\n TextPlugin: () => import(\"gsap/TextPlugin\"),\n DrawSVGPlugin: () => import(\"gsap/DrawSVGPlugin\"),\n Physics2DPlugin: () => import(\"gsap/Physics2DPlugin\"),\n PhysicsPropsPlugin: () => import(\"gsap/PhysicsPropsPlugin\"),\n ScrambleTextPlugin: () => import(\"gsap/ScrambleTextPlugin\"),\n CustomBounce: () => import(\"gsap/CustomBounce\"),\n CustomWiggle: () => import(\"gsap/CustomWiggle\"),\n GSDevTools: () => import(\"gsap/GSDevTools\"),\n InertiaPlugin: () => import(\"gsap/InertiaPlugin\"),\n MorphSVGPlugin: () => import(\"gsap/MorphSVGPlugin\"),\n MotionPathHelper: () => import(\"gsap/MotionPathHelper\"),\n ScrollSmoother: () => import(\"gsap/ScrollSmoother\"),\n SplitText: () => import(\"gsap/SplitText\"),\n} as const;\n\ntype PluginMap = typeof pluginMap;\ntype Plugins = keyof PluginMap;\n\n// Resolves the module type for a given key, then picks the named export matching the key\n// this allows to have the type definitions for autocomplete in your code editor\ntype PluginModule<K extends Plugins> = Awaited<ReturnType<PluginMap[K]>>;\ntype PluginExport<K extends Plugins> = PluginModule<K>[K & keyof PluginModule<K>];\n\nexport default function () {\n // Register all the GSAP Plugins you want at this point\n gsap.registerPlugin(ScrollTrigger);\n\n /*\n If you want to lazy load some of the plugins that are\n not widely used in your app (for example in just a couple\n of components or a single route), you can use this method\n */\n async function lazyLoadPlugin<K extends Plugins>(plugin: K): Promise<PluginExport<K>> {\n const loader = pluginMap[plugin];\n const m = await loader();\n const p = (m as any)[plugin];\n gsap.registerPlugin(p);\n return p;\n }\n\n return {\n gsap,\n ScrollTrigger,\n lazyLoadPlugin,\n };\n}\nAccess in components via useGSAP():
const { gsap, ScrollTrigger, lazyLoadPlugin } = useGSAP();\nuseGSAP() provides typed access to the gsap instance and lazy load method.Use onMount to run GSAP after the DOM is ready. Use the returned cleanup function from onMount (or track the context and clean up in a reactive block / component destroy) to revert. Svelte 5 uses a different lifecycle; the same principle applies: create in “mounted” and revert in “destroyed.”
\n<script>\n import { onMount } from \"svelte\";\n import { gsap } from \"gsap\";\n import { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\n let container;\n\n onMount(() => {\n if (!container) return;\n const ctx = gsap.context(() => {\n gsap.to(\".box\", { x: 100 });\n gsap.from(\".item\", { autoAlpha: 0, stagger: 0.1 });\n }, container);\n return () => ctx.revert();\n });\n</script>\n\n<div bind:this={container}>\n <div class=\"box\">Box</div>\n <div class=\"item\">Item</div>\n</div>\nDo not use global selectors that can match elements outside the current component. Always pass the scope (container element or ref) as the second argument to gsap.context(callback, scope) so that any selector run inside the callback is limited to that subtree.
\n.box is only searched inside containerRef.ScrollTrigger instances are created when you use the scrollTrigger config on a tween/timeline or ScrollTrigger.create(). They are included in gsap.context() and reverted when you call ctx.revert(). So:
| Lifecycle | \nAction | \n
|---|---|
| Mounted | \nCreate tweens and ScrollTriggers inside gsap.context(scope). | \n
| Unmount / Destroy | \nCall ctx.revert() so all animations and ScrollTriggers in that context are killed and inline styles reverted. | \n
Do not create GSAP animations in the component’s setup or in a synchronous top-level script that runs before the root element exists. Wait for onMounted / onMount (or equivalent) so the container ref is in the DOM.
\n