/gsap-plugins

name: gsap-plugins
description: |
  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, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.
zh_name: "GSAP · 动效插件"
zh_description: "GSAP 插件动效：Flip、Draggable、文字、路径等专项动画。"
triggers:
  - "动效"
  - "动画"
  - "motion"
  - "动效插件"
  - "拖拽"
  - "gsap plugins"
  - "gsap plugin registration"
  - "flip animation"
  - "draggable"
  - "morphsvg"
  - "splittext"
license: MIT
od:
  mode: utility
  category: animation-motion
  source-commit: aed9cfd3277740755f6bfc1155c7aa645403b760
  upstream: "https://github.com/greensock/gsap-skills"

GSAP Plugins

> Curated from GreenSock's official GSAP skills: https://github.com/greensock/gsap-skills

When to Use This Skill

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).

**Related skills:** For core tweens use **gsap-core**; for ScrollTrigger use **gsap-scrolltrigger**; for React use **gsap-react**.

Licensing & Install (important)

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.).

• ✅ Install everything from the public `gsap` npm package: `npm install gsap`. All plugins are included — import them as `gsap/SplitText`, `gsap/MorphSVGPlugin`, etc.
• ❌ 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.

Registering Plugins

Register each plugin once so GSAP (and bundlers) know to include it. Use **gsap.registerPlugin()** with every plugin used in the project:

import gsap from "gsap";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import { Flip } from "gsap/Flip";
import { Draggable } from "gsap/Draggable";

gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);

• ✅ Register before using the plugin in any tween or API call.
• ✅ 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.

Scroll

ScrollToPlugin

Animates scroll position (window or a scrollable element). Use for “scroll to element” or “scroll to position” without ScrollTrigger.

gsap.registerPlugin(ScrollToPlugin);

gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });

**ScrollToPlugin — key config (scrollTo object):**

| Option | Description | |--------|-------------| | `x`, `y` | Target scroll position (number), or `"max"` for maximum | | `element` | Selector or element to scroll to (for scroll-into-view) | | `offsetX`, `offsetY` | Offset in pixels from the target position |

ScrollSmoother

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:

<body>
	<div id="smooth-wrapper">
		<div id="smooth-content">
			<!--- ALL YOUR CONTENT HERE --->
		</div>
	</div>
	<!-- position: fixed elements can go outside --->
</body>

DOM / UI

Flip

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).

gsap.registerPlugin(Flip);

const state = Flip.getState(".item");
// change DOM (reorder, add/remove, change classes)
Flip.from(state, { duration: 0.5, ease: "power2.inOut" });

**Flip — key config (Flip.from vars):**

| Option | Description | |--------|-------------| | `absolute` | Use `position: absolute` during the flip (default: `false`) | | `nested` | When true, only the first level of children is measured (better for nested transforms) | | `scale` | When true, scale elements to fit (avoids stretch); default `true` | | `simple` | When true, only position/scale are animated (faster, less accurate) | | `duration`, `ease` | Standard tween options |

More information

https://gsap.com/docs/v3/Plugins/Flip

Draggable

Makes elements draggable, spinnable, or throwable with mouse/touch. Use for sliders, cards, reorderable lists, or any drag interaction.

gsap.registerPlugin(Draggable, InertiaPlugin);

Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
Draggable.create(".knob", { type: "rotation" });

**Draggable — key config options:**

| Option | Description | |--------|-------------| | `type` | `"x"`, `"y"`, `"x,y"`, `"rotation"`, `"scroll"` | | `bounds` | Element, selector, or `{ minX, maxX, minY, maxY }` to constrain drag | | `inertia` | `true` to enable throw/momentum (requires InertiaPlugin) | | `edgeResistance` | 0–1; resistance when dragging past bounds | | `cursor` | CSS cursor during drag | | `onDragStart`, `onDrag`, `onDragEnd` | Callbacks; receive event and target | | `onThrowUpdate`, `onThrowComplete` | Callbacks when inertia is active |