gsap-plugins

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

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

Use SplitText.create(target, { type: "words, chars" }) to split the element, then tween split.chars with stagger. For re-splitting on font load or resize, set autoSplit: true and return your animation from the onSplit callback.

DrawSVG only animates strokes, so the target element must have a visible stroke and stroke-width set in CSS or as SVG attributes. It works on path, line, polyline, polygon, rect, and ellipse elements, but does not affect fill.

Register both Draggable and InertiaPlugin, then set inertia: true in Draggable.create(). You can also track velocity with InertiaPlugin.track() and use inertia: { x: "auto" } in a tween to glide to a stop.

Use Flip when animating between two layout states, such as reordered lists or expanded panels. Capture the state with Flip.getState(), change the DOM, then call Flip.from() to animate from the old state to the new one.