gsap-frameworks

Name: gsap-frameworks
Author: calesthio

41kstars4.9kforks

How to install gsap-frameworks?

calesthio/openmontage/gsap-frameworks

$npx -y skills add calesthio/OpenMontage --skill gsap-frameworks

Installs into the current project.

Summary

Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framewo

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	Use onMounted to run GSAP after the component is in the DOM. Use onUnmounted to clean up.
18
19	```javascript
20	import { onMounted, onUnmounted, ref } from "vue";
21	import { gsap } from "gsap";
22	import { ScrollTrigger } from "gsap/ScrollTrigger";
23	gsap.registerPlugin(ScrollTrigger); // once per app, e.g. in main.js
24
25	export default {
26	setup() {
27	const container = ref(null);
28	let ctx;
29
30	onMounted(() => {
31	if (!container.value) return;
32	ctx = gsap.context(() => {
33	gsap.to(".box", { x: 100, duration: 0.6 });
34	gsap.from(".item", { autoAlpha: 0, y: 20, stagger: 0.1 });
35	}, container.value);
36	});
37
38	onUnmounted(() => {
39	ctx?.revert();
40	});
41
42	return { container };
43	}
44	};
45	```
46
47	- ✅ 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.
48	- ✅ onUnmounted — always call ctx.revert() so tweens and ScrollTriggers are killed and inline styles reverted.
49
50	## Vue 3 (script setup)
51
52	Same idea with `<script setup>` and refs:
53
54	```javascript
55	<script setup>
56	import { onMounted, onUnmounted, ref } from "vue";
57	import { gsap } from "gsap";
58	import { ScrollTrigger } from "gsap/ScrollTrigger";
59
60	const container = ref(null);
61	let ctx;
62
63	onMounted(() => {
64	if (!container.value) return;
65	ctx = gsap.context(() => {
66	gsap.to(".box", { x: 100 });
67	gsap.from(".item", { autoAlpha: 0, stagger: 0.1 });
68	}, container.value);
69	});
70
71	onUnmounted(() => {
72	ctx?.revert();
73	});
74	</script>
75
76	<template>
77	<div ref="container">
78	<div class="box">Box</div>
79	<div class="item">Item</div>
80	</div>
81	</template>
82	```
83
84	## Svelte
85
86	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.”
87
88	```javascript
89	<script>
90	import { onMount } from "svelte";
91	import { gsap } from "gsap";
92	import { ScrollTrigger } from "gsap/ScrollTrigger";
93
94	let container;
95
96	onMount(() => {
97	if (!container) return;
98	const ctx = gsap.context(() => {
99	gsap.to(".box", { x: 100 });
100	gsap.from(".item", { autoAlpha: 0, stagger: 0.1 });
101	}, container);
102	return () => ctx.revert();
103	});
104	</script>
105
106	<div bind:this={container}>
107	<div class="box">Box</div>
108	<div class="item">Item</div>
109	</div>
110	```
111
112	- ✅ bind:this={container} — get a reference to the root element so you can pass it to gsap.context(scope).
113	- ✅ return () => ctx.revert() — Svelte’s onMount can return a cleanup function; call ctx.revert() there so cleanup runs when the component is destroyed.
114
115	## Scoping Selectors
116
117	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.
118
119	- ✅ gsap.context(() => { gsap.to(".box", ...) }, containerRef) — `.box` is only searched inside `containerRef`.
120	- ❌ Running gsap.to(".box", ...) without a context scope in a component can affect other instances or the rest of the page.
121
122	## ScrollTrigger Cleanup
123
124	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:
125
126	- Create ScrollTriggers inside

People who liked this also viewed

6 picks

Type

gsap-frameworks

41kstars4.9kforks

View on GitHub

How to install gsap-frameworks?

calesthio/openmontage/gsap-frameworks

$npx -y skills add calesthio/OpenMontage --skill gsap-frameworks

Installs into the current project.

Summary

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	Use onMounted to run GSAP after the component is in the DOM. Use onUnmounted to clean up.
18
19	```javascript
20	import { onMounted, onUnmounted, ref } from "vue";
21	import { gsap } from "gsap";
22	import { ScrollTrigger } from "gsap/ScrollTrigger";
23	gsap.registerPlugin(ScrollTrigger); // once per app, e.g. in main.js
24
25	export default {
26	setup() {
27	const container = ref(null);
28	let ctx;
29
30	onMounted(() => {
31	if (!container.value) return;
32	ctx = gsap.context(() => {
33	gsap.to(".box", { x: 100, duration: 0.6 });
34	gsap.from(".item", { autoAlpha: 0, y: 20, stagger: 0.1 });
35	}, container.value);
36	});
37
38	onUnmounted(() => {
39	ctx?.revert();
40	});
41
42	return { container };
43	}
44	};
45	```
46
47	- ✅ 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.
48	- ✅ onUnmounted — always call ctx.revert() so tweens and ScrollTriggers are killed and inline styles reverted.
49
50	## Vue 3 (script setup)
51
52	Same idea with `<script setup>` and refs:
53
54	```javascript
55	<script setup>
56	import { onMounted, onUnmounted, ref } from "vue";
57	import { gsap } from "gsap";
58	import { ScrollTrigger } from "gsap/ScrollTrigger";
59
60	const container = ref(null);
61	let ctx;
62
63	onMounted(() => {
64	if (!container.value) return;
65	ctx = gsap.context(() => {
66	gsap.to(".box", { x: 100 });
67	gsap.from(".item", { autoAlpha: 0, stagger: 0.1 });
68	}, container.value);
69	});
70
71	onUnmounted(() => {
72	ctx?.revert();
73	});
74	</script>
75
76	<template>
77	<div ref="container">
78	<div class="box">Box</div>
79	<div class="item">Item</div>
80	</div>
81	</template>
82	```
83
84	## Svelte
85
86	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.”
87
88	```javascript
89	<script>
90	import { onMount } from "svelte";
91	import { gsap } from "gsap";
92	import { ScrollTrigger } from "gsap/ScrollTrigger";
93
94	let container;
95
96	onMount(() => {
97	if (!container) return;
98	const ctx = gsap.context(() => {
99	gsap.to(".box", { x: 100 });
100	gsap.from(".item", { autoAlpha: 0, stagger: 0.1 });
101	}, container);
102	return () => ctx.revert();
103	});
104	</script>
105
106	<div bind:this={container}>
107	<div class="box">Box</div>
108	<div class="item">Item</div>
109	</div>
110	```
111
112	- ✅ bind:this={container} — get a reference to the root element so you can pass it to gsap.context(scope).
113	- ✅ return () => ctx.revert() — Svelte’s onMount can return a cleanup function; call ctx.revert() there so cleanup runs when the component is destroyed.
114
115	## Scoping Selectors
116
117	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.
118
119	- ✅ gsap.context(() => { gsap.to(".box", ...) }, containerRef) — `.box` is only searched inside `containerRef`.
120	- ❌ Running gsap.to(".box", ...) without a context scope in a component can affect other instances or the rest of the page.
121
122	## ScrollTrigger Cleanup
123
124	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:
125
126	- Create ScrollTriggers inside

People who liked this also viewed

6 picks

Type