gsap-plugins

Name: gsap-plugins
Author: calesthio

41kstars4.9kforks

How to install gsap-plugins?

calesthio/openmontage/gsap-plugins

$npx -y skills add calesthio/OpenMontage --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	## Registering Plugins
10
11	Register each plugin once so GSAP (and bundlers) know to include it. Use gsap.registerPlugin() with every plugin used in the project:
12
13	```javascript
14	import gsap from "gsap";
15	import { ScrollToPlugin } from "gsap/ScrollToPlugin";
16	import { Flip } from "gsap/Flip";
17	import { Draggable } from "gsap/Draggable";
18
19	gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
20	```
21
22	- ✅ Register before using the plugin in any tween or API call.
23	- ✅ 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.
24
25	## Scroll
26
27	### ScrollToPlugin
28
29	Animates scroll position (window or a scrollable element). Use for “scroll to element” or “scroll to position” without ScrollTrigger.
30
31	```javascript
32	gsap.registerPlugin(ScrollToPlugin);
33
34	gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
35	gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
36	gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });
37	```
38
39	ScrollToPlugin — key config (scrollTo object):
40
41	\| Option \| Description \|
42	\|--------\|-------------\|
43	\| `x`, `y` \| Target scroll position (number), or `"max"` for maximum \|
44	\| `element` \| Selector or element to scroll to (for scroll-into-view) \|
45	\| `offsetX`, `offsetY` \| Offset in pixels from the target position \|
46
47	### ScrollSmoother
48
49	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:
50
51	```html
52	<body>
53	<div id="smooth-wrapper">
54	<div id="smooth-content">
55	<!--- ALL YOUR CONTENT HERE --->
56	</div>
57	</div>
58	<!-- position: fixed elements can go outside --->
59	</body>
60	```
61
62	## DOM / UI
63
64	### Flip
65
66	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).
67
68	```javascript
69	gsap.registerPlugin(Flip);
70
71	const state = Flip.getState(".item");
72	// change DOM (reorder, add/remove, change classes)
73	Flip.from(state, { duration: 0.5, ease: "power2.inOut" });
74	```
75
76	Flip — key config (Flip.from vars):
77
78	\| Option \| Description \|
79	\|--------\|-------------\|
80	\| `absolute` \| Use `position: absolute` during the flip (default: `false`) \|
81	\| `nested` \| When true, only the first level of children is measured (better for nested transforms) \|
82	\| `scale` \| When true, scale elements to fit (avoids stretch); default `true` \|
83	\| `simple` \| When true, only position/scale are animated (faster, less accurate) \|
84	\| `duration`, `ease` \| Standard tween options \|
85
86	#### More information
87
88	https://gsap.com/docs/v3/Plugins/Flip
89
90	### Draggable
91
92	Makes elements draggable, spinnable, or throwable with mouse/touch. Use for sliders, cards, reorderable lists, or any drag interaction.
93
94	```javascript
95	gsap.registerPlugin(Draggable, InertiaPlugin);
96
97	Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
98	Draggable.create(".knob", { type: "rotation" });
99	```
100
101	Draggable — key config options:
102
103	\| Option \| Description \|
104	\|--------\|-------------\|
105	\| `type` \| `"x"`, `"y"`, `"x,y"`, `"rotation"`, `"scroll"` \|
106	\| `bounds` \| Element, selector, or `{ minX, maxX, minY, maxY }` to constrain drag \|
107	\| `inertia` \| `true` to enable throw/momentum (requires InertiaPlugin) \|
108	\| `edgeResistance` \| 0–1; resistance when dragging past bounds \|
109	\| `cursor` \| CSS cursor during drag \|
110	\| `onDragStart`, `onDrag`, `onDragEnd` \| Callbacks; receive event and target \|
111	\| `onThrowUpdate`, `onThrowComplete` \| Callbacks when inertia is active \|
112
113	### Inertia (InertiaPlugin)
114
115	Works with Draggable for momentum after release, or track the inertia/velocity of any property of any object so that it can then seamlessly glide to a stop using a simple tween. Register with Draggable when using `in

People who liked this also viewed

6 picks

Type

gsap-plugins

41kstars4.9kforks

View on GitHub

How to install gsap-plugins?

calesthio/openmontage/gsap-plugins

$npx -y skills add calesthio/OpenMontage --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	## Registering Plugins
10
11	Register each plugin once so GSAP (and bundlers) know to include it. Use gsap.registerPlugin() with every plugin used in the project:
12
13	```javascript
14	import gsap from "gsap";
15	import { ScrollToPlugin } from "gsap/ScrollToPlugin";
16	import { Flip } from "gsap/Flip";
17	import { Draggable } from "gsap/Draggable";
18
19	gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
20	```
21
22	- ✅ Register before using the plugin in any tween or API call.
23	- ✅ 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.
24
25	## Scroll
26
27	### ScrollToPlugin
28
29	Animates scroll position (window or a scrollable element). Use for “scroll to element” or “scroll to position” without ScrollTrigger.
30
31	```javascript
32	gsap.registerPlugin(ScrollToPlugin);
33
34	gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
35	gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
36	gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });
37	```
38
39	ScrollToPlugin — key config (scrollTo object):
40
41	\| Option \| Description \|
42	\|--------\|-------------\|
43	\| `x`, `y` \| Target scroll position (number), or `"max"` for maximum \|
44	\| `element` \| Selector or element to scroll to (for scroll-into-view) \|
45	\| `offsetX`, `offsetY` \| Offset in pixels from the target position \|
46
47	### ScrollSmoother
48
49	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:
50
51	```html
52	<body>
53	<div id="smooth-wrapper">
54	<div id="smooth-content">
55	<!--- ALL YOUR CONTENT HERE --->
56	</div>
57	</div>
58	<!-- position: fixed elements can go outside --->
59	</body>
60	```
61
62	## DOM / UI
63
64	### Flip
65
66	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).
67
68	```javascript
69	gsap.registerPlugin(Flip);
70
71	const state = Flip.getState(".item");
72	// change DOM (reorder, add/remove, change classes)
73	Flip.from(state, { duration: 0.5, ease: "power2.inOut" });
74	```
75
76	Flip — key config (Flip.from vars):
77
78	\| Option \| Description \|
79	\|--------\|-------------\|
80	\| `absolute` \| Use `position: absolute` during the flip (default: `false`) \|
81	\| `nested` \| When true, only the first level of children is measured (better for nested transforms) \|
82	\| `scale` \| When true, scale elements to fit (avoids stretch); default `true` \|
83	\| `simple` \| When true, only position/scale are animated (faster, less accurate) \|
84	\| `duration`, `ease` \| Standard tween options \|
85
86	#### More information
87
88	https://gsap.com/docs/v3/Plugins/Flip
89
90	### Draggable
91
92	Makes elements draggable, spinnable, or throwable with mouse/touch. Use for sliders, cards, reorderable lists, or any drag interaction.
93
94	```javascript
95	gsap.registerPlugin(Draggable, InertiaPlugin);
96
97	Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
98	Draggable.create(".knob", { type: "rotation" });
99	```
100
101	Draggable — key config options:
102
103	\| Option \| Description \|
104	\|--------\|-------------\|
105	\| `type` \| `"x"`, `"y"`, `"x,y"`, `"rotation"`, `"scroll"` \|
106	\| `bounds` \| Element, selector, or `{ minX, maxX, minY, maxY }` to constrain drag \|
107	\| `inertia` \| `true` to enable throw/momentum (requires InertiaPlugin) \|
108	\| `edgeResistance` \| 0–1; resistance when dragging past bounds \|
109	\| `cursor` \| CSS cursor during drag \|
110	\| `onDragStart`, `onDrag`, `onDragEnd` \| Callbacks; receive event and target \|
111	\| `onThrowUpdate`, `onThrowComplete` \| Callbacks when inertia is active \|
112
113	### Inertia (InertiaPlugin)
114
115	Works with Draggable for momentum after release, or track the inertia/velocity of any property of any object so that it can then seamlessly glide to a stop using a simple tween. Register with Draggable when using `in

People who liked this also viewed

6 picks

Type