gsap-plugins

Import each plugin from the gsap package and call gsap.registerPlugin() once before first use, for example gsap.registerPlugin(ScrollToPlugin, Flip, Draggable). In React, register at the top level rather than inside a re-rendering component.

Use SplitText.create(target, { type: "words, chars" }) to split the element, then tween split.chars with stagger. Call split.revert() on cleanup, or use autoSplit with onSplit() to handle font loading and re-splits.

No. Since Webflow's acquisition of GSAP, every plugin is free including for commercial use. Install everything from the public gsap npm package and import plugins directly; no license key, auth token, or private registry is needed.

Register Draggable and InertiaPlugin, then call Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true }). The inertia option enables throw and momentum after release, with callbacks like onDrag and onThrowUpdate available.

DrawSVG only animates strokes, so the element must have a visible stroke and stroke-width set in CSS or as SVG attributes. Also confirm DrawSVGPlugin is registered and the target is a path, line, polyline, polygon, rect, or ellipse.

Use Flip when animating between two layout states such as reordered lists, grid changes, or expanded and collapsed views. Capture state with Flip.getState(), apply the DOM change, then animate with Flip.from().