gsap-frameworks

Name: gsap-frameworks
Author: greensock

bygreensock· 8 skills

Installs

34k

Stars

12k

Forks

732

How to install gsap-frameworks?

greensock/gsap-skills/gsap-frameworks

$npx -y skills add greensock/gsap-skills --skill gsap-frameworks

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/greensock/gsap-skills" --skill "greensock/gsap-skills/gsap-frameworks"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/greensock/gsap-skills" that are relevant to the current task. Run `npx skills add "https://github.com/greensock/gsap-skills"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# GSAP with Vue, Svelte, and Other Frameworks
2
3	## When to Use This Skill
4
5	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()).
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
17	See `examples/vue/` for a runnable Vite + Vue 3 project demonstrating these patterns.
18
19	Use onMounted to run GSAP after the component is in the DOM. Use onUnmounted to clean up.
20
21	```javascript
22	import { onMounted, onUnmounted, ref } from "vue";
23	import { gsap } from "gsap";
24	import { ScrollTrigger } from "gsap/ScrollTrigger";
25	gsap.registerPlugin(ScrollTrigger); // once per app, e.g. in main.js
26
27	export default {
28	setup() {
29	const container = ref(null);
30	let ctx;
31
32	onMounted(() => {
33	if (!container.value) return;
34	ctx = gsap.context(() => {
35	gsap.to(".box", { x: 100, duration: 0.6 });
36	gsap.from(".item", { autoAlpha: 0, y: 20, stagger: 0.1 });
37	}, container.value);
38	});
39
40	onUnmounted(() => {
41	ctx?.revert();
42	});
43
44	return { container };
45	},
46	};
47	```
48
49	- ✅ gsap.context(scope) — pass the container ref (e.g. `container.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.
50	- ✅ onUnmounted — always call ctx.revert() so tweens and ScrollTriggers are killed and inline styles reverted.
51
52	## Vue 3 (script setup)
53
54	Same idea with `<script setup>` and refs:
55
56	```javascript
57	<script setup>
58	import { onMounted, onUnmounted, ref } from "vue";
59	import { gsap } from "gsap";
60	import { ScrollTrigger } from "gsap/ScrollTrigger";
61
62	const container = ref(null);
63	let ctx;
64
65	onMounted(() => {
66	if (!container.value) return;
67	ctx = gsap.context(() => {
68	gsap.to(".box", { x: 100 });
69	gsap.from(".item", { autoAlpha: 0, stagger: 0.1 });
70	}, container.value);
71	});
72
73	onUnmounted(() => {
74	ctx?.revert();
75	});
76	</script>
77
78	<template>
79	<div ref="container">
80	<div class="box">Box</div>
81	<div class="item">Item</div>
82	</div>
83	</template>
84	```
85
86	## Nuxt 4
87
88	> See `examples/nuxt/` for a runnable Nuxt 4 project with plugin registration, lazy loading, and SSR-safe patterns.
89
90	Use a reusable composable to register GSAP Plugins and also to lazy load Plugins that are not extensively used in your application:
91
92	```typescript
93	// composables/useGSAP.ts
94	import { gsap } from "gsap";
95	import { ScrollTrigger } from "gsap/ScrollTrigger";
96
97	const PLUGINS = [
98	"CSSRulePlugin",
99	"CustomBounce",
100	"CustomEase",
101	"CustomWiggle",
102	"Draggable",
103	"DrawSVGPlugin",
104	"EaselPlugin",
105	"EasePack",
106	"Flip",
107	"GSDevTools",
108	"InertiaPlugin",
109	"MorphSVGPlugin",
110	"MotionPathHelper",
111	"MotionPathPlugin",
112	"Observer",
113	"Physics2DPlugin",
114	"PhysicsPropsPlugin",
115	"PixiPlugin",
116	"ScrambleTextPlugin",
117	"ScrollSmoother",
118	"ScrollToPlugin",
119	"ScrollTrigger",
120	"SplitText",
121	"TextPlugin",
122	] as const;
123
124	type Plugins = (typeof PLUGINS)[number];
125
126	// In order to dynamically load all the GSAP plugins
127	const pluginMap = {
128	CustomEase: () => import("gsap/CustomEase"),
129	Draggable: () => import("gsap/Draggable"),
130	CSSRulePlugin: () => import("gsap/CSSRulePlugin"),
131	EaselPlugin: () => import("gsap/EaselPlugin"),
132	EasePack: () => import("gsap/EasePack"),
133	Flip: () => import("gsap/Flip"),
134	MotionPathPlugin: () => import("gsap/MotionPathPlugin"),
135	Observer: () => import("gsap/Observer"),
136	PixiPlugin: () => import("gsap/PixiPlugin"),
137	ScrollToPlugin: () => import("gsap/ScrollToPlugin"),
138	ScrollTrigger: () => import("gsap/ScrollTrigger"),
139	TextPlugin: () => import("gsap/TextPlugin"),
140	DrawSVGPlugin: () => import("gsap/DrawSVGPlugin"),
141	Physics2DPlugin: () => import("gsap/Physics2DPlugin"),
142	PhysicsPropsPlugin: () => import("gsap/PhysicsPropsPlugin"),
143	ScrambleTextPlugin: () => import("gsap/ScrambleTextPlugin"),
144	CustomBounce: () => import("gsap/CustomBounce"),
145	CustomWiggle: () => import("gsap/CustomWiggle"),
146	GSDevTools: () => import("gsap/GSDevTools"),
147	InertiaPlugin: () => import("gsap/InertiaPlugin"),
148	MorphSVGPlugin: () => import("gsap/MorphSVGPlugin"),
149	MotionPathHelper: () => import("gsap/MotionPathHelper"),
150	ScrollSmoother: () => import("gsap/ScrollSmoother"),
151	SplitText: () => import("gsap/SplitText"),
152	} as const;
153
154	type PluginMap = typeof pluginMap;
155	type Plugins = keyof PluginMap;
156
157	// Resolves the module type for a given key, then picks the named export matching the key
158	// this allows to have the type definitions for autocomplete in your code editor
159	type PluginModule<K extends Plugins> = Awaited<ReturnType<PluginMap[K]>>;
160	type PluginExport<K extends Plugins> = PluginModule<K>[K & keyof PluginModule<K>];
161
162	export default function () {
163	// Register all the GSAP Plugins you want at this point
164	gsap.registerPlugin(ScrollTrigger);
165
166	/*
167	If you want to lazy load some of the plugins that are
168	not widely used in your app (for example in just a couple
169	of components or a single route), you can use this method
170	*/
171	async function lazyLoadPlugin<K extends Plugins>(plugin: K): Promise<PluginExport<K>> {
172	const loader = pluginMap[plugin];
173	const m = await loader();
174	const p = (m as any)[plugin];
175	gsap.registerPlugin(p);
176	return p;
177	}
178
179	return {
180	gsap,
181	ScrollTrigger,
182	lazyLoadPlugin,
183	};
184	}
185	```
186
187	Access in components via `useGSAP()`:
188
189	```javascript
190	const { gsap, ScrollTrigger, lazyLoadPlugin } = useGSAP();
191	```
192
193	- ✅ `useGSAP()` provides typed access to the gsap instance and lazy load method.
194	- ✅ Lazy-load any plugin (SplitText, MorphSVG, etc.) that is not widely used in your app to reduce initial bundle size.
195	- ✅ Use gsap.context(scope) and onUnmounted → ctx.revert() in components, same as Vue 3.
196
197	## Svelte
198
199	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.”
200
201	```javascript
202	<script>
203	import { onMount } from "svelte";
204	import { gsap } from "gsap";
205	import { ScrollTrigger } from "gsap/ScrollTrigger";
206
207	let container;
208
209	onMount(() => {
210	if (!container) return;
211	const ctx = gsap.context(() => {
212	gsap.to(".box", { x: 100 });
213	gsap.from(".item", { autoAlpha: 0, stagger: 0.1 });
214	}, container);
215	return () => ctx.revert();
216	});
217	</script>
218
219	<div bind:this={container}>
220	<div class="box">Box</div>
221	<div class="item">Item</div>
222	</div>
223	```
224
225	- ✅ bind:this={container} — get a reference to the root element so you can pass it to gsap.context(scope).
226	- ✅ return () => ctx.revert() — Svelte’s onMount can return a cleanup function; call ctx.revert() there so cleanup runs when the component is destroyed.
227
228	## Scoping Selectors
229
230	Do 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.
231
232	- ✅ gsap.context(() => { gsap.to(".box", ...) }, containerRef) — `.box` is only searched inside `containerRef`.
233	- ❌ Running gsap.to(".box", ...) without a context scope in a component can affect other instances or the rest of the page.
234
235	## ScrollTrigger Cleanup
236
237	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:
238
239	- Create ScrollTriggers inside the same gsap.context() callback you use for tweens.
240	- Call ScrollTrigger.refresh() after layout changes (e.g. after data loads) that affect trigger positions; in Vue/Svelte that often means after the DOM updates (e.g. nextTick in Vue, tick in Svelte, or after async content load).
241
242	## When to Create vs Kill
243
244	\| Lifecycle \| Action \|
245	\| --------------------- \| ----------------------------------------------------------------------------------------------------------------- \|
246	\| Mounted \| Create tweens and ScrollTriggers inside gsap.context(scope). \|
247	\| Unmount / Destroy \| Call ctx.revert() so all animations and ScrollTriggers in that context are killed and inline styles reverted. \|
248
249	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.
250
251	## Do Not
252
253	- ❌ Create tweens or ScrollTriggers before the component is mounted (e.g. in setup without onMounted); the DOM nodes may not exist yet.
254	- ❌ Use selector strings without a scope (pass the container to gsap.context() as the second argument) so selectors don’t match elements outside the component.
255	- ❌ Skip cleanup; always call ctx.revert() in onUnmounted / onMount’s return so animations and ScrollTriggers are killed when the component is destroyed.
256	- ❌ Register plugins inside a component body that runs every render (it doesn't hurt anything, it's just wasteful); register once at app level.
257
258	### Learn More
259
260	- gsap-react skill for React-specific patterns (useGSAP, contextSafe).

6 picks

Type

Run `npx skills use "https://github.com/greensock/gsap-skills" --skill "greensock/gsap-skills/gsap-frameworks"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/greensock/gsap-skills" that are relevant to the current task. Run `npx skills add "https://github.com/greensock/gsap-skills"` and select the relevant skills, then follow their instructions.

gsap-frameworks

How to install gsap-frameworks?

Related

gsap-frameworks

How to install gsap-frameworks?

Related