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 target | | `onThrowUpdate`, `onThrowComplete` | Callbacks when inertia is active | ### Inertia (InertiaPlugin) 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 `inertia: true`: ```javascript gsap.registerPlugin(Draggable, InertiaPlugin); Draggable.create(".box", { type: "x,y", inertia: true }); ``` Or track velocity of a property: ```javascript InertiaPlugin.track(".box", "x"); ``` Then use `"auto"` to continue the current velocity and glide to a stop: ```javascript gsap.to(obj, { inertia: { x: "auto" } }); ``` ### Observer Normalizes pointer and scroll input across devices. Use for swipe, scroll direction, or custom gesture logic without tying directly to scroll position like ScrollTrigger. ```javascript gsap.registerPlugin(Observer); Observer.create({ target: "#area", onUp: () => {}, onDown: () => {}, onLeft: () => {}, onRight: () => {}, tolerance: 10 }); ``` **Observer — key config options:** | Option | Description | |--------|-------------| | `target` | Element or selector to observe | | `onUp`, `onDown`, `onLeft`, `onRight` | Callbacks when swipe/scroll passes tolerance in that direction | | `tolerance` | Pixels before direction is detected; default 10 | | `type` | `"touch"`, `"pointer"`, or `"wheel"` (default: `"touch,pointer"`) | ## Text ### SplitText Splits an element’s text into characters, words, and/or lines (each in its own element) for staggered or per-unit animation. Use when animating text character-by-character, word-by-word, or line-by-line. Returns an instance with **chars**, **words**, **lines** (and **masks** when `mask` is set). Restore original markup with **revert()** or let **gsap.context()** revert. Integrates with **gsap.context()**, **matchMedia()**, and **useGSAP()**. API: **SplitText.create(target, vars)** (target = selector, element, or array). ```javascript gsap.registerPlugin(SplitText); const split = SplitText.create(".heading", { type: "words, chars" }); gsap.from(split.chars, { opacity: 0, y: 20, stagger: 0.03, duration: 0.4 }); // later: split.revert() or let gsap.context() cleanup revert ``` With **onSplit()** (v3.13.0+), animations run on each split and on re-split when **autoSplit** is used; returning a tween/timeline from **onSplit()** lets SplitText clean up and sync progress on re-split: ```javascript SplitText.create(".split", { type: "lines", autoSplit: true, onSplit(self) { return gsap.from(self.lines, { y: 100, opacity: 0, stagger: 0.05, duration: 0.5 }); } }); ``` **SplitText — key config (SplitText.create vars):** | Option | Description | |--------|-------------| | **type** | Comma-separated: `"chars"`, `"words"`, `"lines"`. Default `"chars,words,lines"`. Only split what is needed (e.g. `"words, chars"` if not using lines) for performance. Avoid chars-only without words/lines or use **smartWrap: true** to prevent odd line breaks. | | **charsClass**, **wordsClass**, **linesClass** | CSS class on each split element. Append `"++"` to add an incremented class (e.g. `linesClass: "line++"` → `line1`, `line2`, …). | | **aria** | `"auto"` (default), `"hidden"`, or `"none"`. Accessibility: `"auto"` adds `aria-label` on the split element and `aria-hidden` on line/word/char elements so screen readers read the label; `"hidden"` hides all from readers; `"none"` leaves aria unchanged. Use `"none"` plus a screen-reader-only duplicate if nested links/semantics must be exposed. | | **autoSplit** | When `true`, reverts and re-splits when fonts finish loading or when the element width changes (and lines are split), avoiding wrong line breaks. **Animations must be created inside onSplit()** so they target the newly split elements; **return** the animation from **onSplit()** for automatic cleanup and time-sync on re-split. | | **onSplit(self)** | Callback when split completes (and on each re-split if **autoSplit** is `true`). Receives the SplitText instance. Returning a GSAP tween or timeline enables automatic revert/sync of that animation when re-splitting. | | **mask** | `"lines"`, `"words"`, or `"chars"`. Wraps each unit in an extra element with `overflow: clip` for mask/reveal effects. Only one type; access wrappers on the instance’s **masks** array (or use class `-mask` if a class is set). | | **tag** | Wrapper element tag; default `"div"`. Use `"span"` for inline (note: transforms like rotation/scale may not render on inline elements in some browsers). | | **deepSlice** | When `true` (default), nested elements (e.g. `<strong>`) that span multiple lines are subdivided so lines don’t stretch vertically. Only applies when splitting lines. | | **ignore** | Selector or element(s) to leave unsplit (e.g. `ignore: "sup"`). | | **smartWrap** | When splitting **chars** only, wraps words in a `white-space: nowrap` span to avoid mid-word line breaks. Ignored if words or lines are split. Default `false`. | | **wordDelimiter** | Word boundary: string (default `" "`), RegExp, or `{ delimiter: RegExp, replaceWith: string }` for custom splitting (e.g. zero-width joiner for hashtags, or non-Latin). | | **prepareText(text, parent)** | Function that receives raw text and parent element; return modified text before splitting (e.g. to insert break markers for languages without spaces). | | **propIndex** | When `true`, adds a CSS variable with index on each split element (e.g. `--word: 1`, `--char: 2`). | | **reduceWhiteSpace** | Collapse consecutive spaces; default `true`. From v3.13.0 also honors line breaks and can insert `<br>` for `<pre>`. | | **onRevert** | Callback when the instance is reverted. | **Tips:** Split only what is animated (e.g. skip chars if only animating words). For custom fonts, split after they load (e.g. `document.fonts.ready.then(...)`) or use **autoSplit: true** with **onSplit()**. To avoid kerning shift when splitting chars, use CSS `font-kerning: none; text-rendering: optimizeSpeed;`. Avoid `text-wrap: balance`; it can interfere with splitting. SplitText does not support SVG `<text>`. **Learn more:** [SplitText](https://gsap.com/docs/v3/Plugins/SplitText/) ### ScrambleText Animates text with a scramble/glitch effect. Use when revealing or transitioning text with a scramble. ```javascript gsap.registerPlugin(ScrambleTextPlugin); gsap.to(".text", { duration: 1, scrambleText: { text: "New message", chars: "01", revealDelay: 0.5 } }); ``` ## SVG ### DrawSVG (DrawSVGPlugin)