gsap-plugins

Name: gsap-plugins
Author: greensock

34kinstalls715forks

How to install gsap-plugins?

greensock/gsap-skills/gsap-plugins

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

Installs into the current project.

Summary

Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scr

Files · 1

View on GitHub

SKILL.md

1	# GSAP Plugins
2
3	## When to Use This Skill
4
5	Apply when using or reviewing code that uses GSAP plugins: registering plugins, scroll-to, flip/FLIP animations, draggable elements, SVG (DrawSVG, MorphSVG, MotionPath), text (SplitText, ScrambleText), physics, easing plugins (CustomEase, EasePack, CustomWiggle, CustomBounce), or GSDevTools. ScrollTrigger has its own skill (gsap-scrolltrigger).
6
7	Related skills: For core tweens use gsap-core; for ScrollTrigger use gsap-scrolltrigger; for React use gsap-react.
8
9	## Licensing & Install (important)
10
11	Every GSAP plugin is free, including for commercial use. Since [Webflow's acquisition of GSAP](https://gsap.com/blog/webflow-GSAP/), Club GSAP is no longer a paid tier and no plugin requires a membership, license key, or auth token — this includes formerly Club-only plugins (SplitText, MorphSVG, etc.).
12
13	- ✅ Install everything from the public `gsap` npm package: `npm install gsap`. All plugins are included — import them as `gsap/SplitText`, `gsap/MorphSVGPlugin`, etc.
14	- ❌ Do not generate an `.npmrc` with a GreenSock auth token, suggest the private `npm.greensock.com` registry, or tell users to sign up for Club GSAP to access a plugin. Those instructions are outdated.
15
16	## Registering Plugins
17
18	Register each plugin once so GSAP (and bundlers) know to include it. Use gsap.registerPlugin() with every plugin used in the project:
19
20	```javascript
21	import gsap from "gsap";
22	import { ScrollToPlugin } from "gsap/ScrollToPlugin";
23	import { Flip } from "gsap/Flip";
24	import { Draggable } from "gsap/Draggable";
25
26	gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
27	```
28
29	- ✅ Register before using the plugin in any tween or API call.
30	- ✅ In React, register at top level or once in the app (e.g. before first useGSAP); do not register inside a component that re-renders. useGSAP is a plugin that needs to be registered before use.
31
32	## Scroll
33
34	### ScrollToPlugin
35
36	Animates scroll position (window or a scrollable element). Use for “scroll to element” or “scroll to position” without ScrollTrigger.
37
38	```javascript
39	gsap.registerPlugin(ScrollToPlugin);
40
41	gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
42	gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
43	gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });
44	```
45
46	ScrollToPlugin — key config (scrollTo object):
47
48	\| Option \| Description \|
49	\|--------\|-------------\|
50	\| `x`, `y` \| Target scroll position (number), or `"max"` for maximum \|
51	\| `element` \| Selector or element to scroll to (for scroll-into-view) \|
52	\| `offsetX`, `offsetY` \| Offset in pixels from the target position \|
53
54	### ScrollSmoother
55
56	Smooth scroll wrapper (smooths native scroll). Requires ScrollTrigger and a specific DOM structure (content wrapper + smooth wrapper). Use when smooth, momentum-style scroll is needed. See GSAP docs for setup; register after ScrollTrigger. DOM structure would look like:
57
58	```html
59	<body>
60	<div id="smooth-wrapper">
61	<div id="smooth-content">
62	<!--- ALL YOUR CONTENT HERE --->
63	</div>
64	</div>
65	<!-- position: fixed elements can go outside --->
66	</body>
67	```
68
69	## DOM / UI
70
71	### Flip
72
73	Capture state with `Flip.getState()`, then apply changes (e.g. layout or class changes), then use `Flip.from()` to animate from the previous state to the new state (FLIP: First, Last, Invert, Play). Use when animating between two layout states (lists, grids, expanded/collapsed).
74
75	```javascript
76	gsap.registerPlugin(Flip);
77
78	const state = Flip.getState(".item");
79	// change DOM (reorder, add/remove, change classes)
80	Flip.from(state, { duration: 0.5, ease: "power2.inOut" });
81	```
82
83	Flip — key config (Flip.from vars):
84
85	\| Option \| Description \|
86	\|--------\|-------------\|
87	\| `absolute` \| Use `position: absolute` during the flip (default: `false`) \|
88	\| `nested` \| When true, only the first level of children is measured (better for nested transforms) \|
89	\| `scale` \| When true, scale elements to fit (avoids stretch); default `true` \|
90	\| `simple` \| When true, only position/scale are animated (faster, less accurate) \|
91	\| `duration`, `ease` \| Standard tween options \|
92
93	#### More information
94
95	https://gsap.com/docs/v3/Plugins/Flip
96
97	### Draggable
98
99	Makes elements draggable, spinnable, or throwable with mouse/touch. Use for sliders, cards, reorderable lists, or any drag interaction.
100
101	```javascript
102	gsap.registerPlugin(Draggable, InertiaPlugin);
103
104	Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
105	Draggable.create(".knob", { type: "rotation" });
106	```
107
108	Draggable — key config options:
109
110	\| Option \| Description \|
111	\|--------\|---

People who liked this also viewed

6 picks

Type

gsap-plugins

34kinstalls715forks

View on GitHub

How to install gsap-plugins?

greensock/gsap-skills/gsap-plugins

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# GSAP Plugins
2
3	## When to Use This Skill
4
5	Apply when using or reviewing code that uses GSAP plugins: registering plugins, scroll-to, flip/FLIP animations, draggable elements, SVG (DrawSVG, MorphSVG, MotionPath), text (SplitText, ScrambleText), physics, easing plugins (CustomEase, EasePack, CustomWiggle, CustomBounce), or GSDevTools. ScrollTrigger has its own skill (gsap-scrolltrigger).
6
7	Related skills: For core tweens use gsap-core; for ScrollTrigger use gsap-scrolltrigger; for React use gsap-react.
8
9	## Licensing & Install (important)
10
11	Every GSAP plugin is free, including for commercial use. Since [Webflow's acquisition of GSAP](https://gsap.com/blog/webflow-GSAP/), Club GSAP is no longer a paid tier and no plugin requires a membership, license key, or auth token — this includes formerly Club-only plugins (SplitText, MorphSVG, etc.).
12
13	- ✅ Install everything from the public `gsap` npm package: `npm install gsap`. All plugins are included — import them as `gsap/SplitText`, `gsap/MorphSVGPlugin`, etc.
14	- ❌ Do not generate an `.npmrc` with a GreenSock auth token, suggest the private `npm.greensock.com` registry, or tell users to sign up for Club GSAP to access a plugin. Those instructions are outdated.
15
16	## Registering Plugins
17
18	Register each plugin once so GSAP (and bundlers) know to include it. Use gsap.registerPlugin() with every plugin used in the project:
19
20	```javascript
21	import gsap from "gsap";
22	import { ScrollToPlugin } from "gsap/ScrollToPlugin";
23	import { Flip } from "gsap/Flip";
24	import { Draggable } from "gsap/Draggable";
25
26	gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
27	```
28
29	- ✅ Register before using the plugin in any tween or API call.
30	- ✅ In React, register at top level or once in the app (e.g. before first useGSAP); do not register inside a component that re-renders. useGSAP is a plugin that needs to be registered before use.
31
32	## Scroll
33
34	### ScrollToPlugin
35
36	Animates scroll position (window or a scrollable element). Use for “scroll to element” or “scroll to position” without ScrollTrigger.
37
38	```javascript
39	gsap.registerPlugin(ScrollToPlugin);
40
41	gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
42	gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
43	gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });
44	```
45
46	ScrollToPlugin — key config (scrollTo object):
47
48	\| Option \| Description \|
49	\|--------\|-------------\|
50	\| `x`, `y` \| Target scroll position (number), or `"max"` for maximum \|
51	\| `element` \| Selector or element to scroll to (for scroll-into-view) \|
52	\| `offsetX`, `offsetY` \| Offset in pixels from the target position \|
53
54	### ScrollSmoother
55
56	Smooth scroll wrapper (smooths native scroll). Requires ScrollTrigger and a specific DOM structure (content wrapper + smooth wrapper). Use when smooth, momentum-style scroll is needed. See GSAP docs for setup; register after ScrollTrigger. DOM structure would look like:
57
58	```html
59	<body>
60	<div id="smooth-wrapper">
61	<div id="smooth-content">
62	<!--- ALL YOUR CONTENT HERE --->
63	</div>
64	</div>
65	<!-- position: fixed elements can go outside --->
66	</body>
67	```
68
69	## DOM / UI
70
71	### Flip
72
73	Capture state with `Flip.getState()`, then apply changes (e.g. layout or class changes), then use `Flip.from()` to animate from the previous state to the new state (FLIP: First, Last, Invert, Play). Use when animating between two layout states (lists, grids, expanded/collapsed).
74
75	```javascript
76	gsap.registerPlugin(Flip);
77
78	const state = Flip.getState(".item");
79	// change DOM (reorder, add/remove, change classes)
80	Flip.from(state, { duration: 0.5, ease: "power2.inOut" });
81	```
82
83	Flip — key config (Flip.from vars):
84
85	\| Option \| Description \|
86	\|--------\|-------------\|
87	\| `absolute` \| Use `position: absolute` during the flip (default: `false`) \|
88	\| `nested` \| When true, only the first level of children is measured (better for nested transforms) \|
89	\| `scale` \| When true, scale elements to fit (avoids stretch); default `true` \|
90	\| `simple` \| When true, only position/scale are animated (faster, less accurate) \|
91	\| `duration`, `ease` \| Standard tween options \|
92
93	#### More information
94
95	https://gsap.com/docs/v3/Plugins/Flip
96
97	### Draggable
98
99	Makes elements draggable, spinnable, or throwable with mouse/touch. Use for sliders, cards, reorderable lists, or any drag interaction.
100
101	```javascript
102	gsap.registerPlugin(Draggable, InertiaPlugin);
103
104	Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
105	Draggable.create(".knob", { type: "rotation" });
106	```
107
108	Draggable — key config options:
109
110	\| Option \| Description \|
111	\|--------\|---

People who liked this also viewed

6 picks

Type