gsap-plugins Checked

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 |

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

gsap.registerPlugin(Draggable, InertiaPlugin);
Draggable.create(".box", { type: "x,y", inertia: true });

Or track velocity of a property:

InertiaPlugin.track(".box", "x");

Then use "auto" to continue the current velocity and glide to a stop:

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.

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

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:

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 li