Gsap Plugins

# GSAP Plugins

## 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:

```javascript 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.

```javascript 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:

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

```javascript 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.

```javascript 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 tar