gsap-plugins

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

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

Use SplitText.create(target, { type: "words, chars" }) to split the element, then animate split.chars with a stagger tween. Call split.revert() or use gsap.context() for cleanup when the component unmounts.

DrawSVG only animates strokes, so the 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, not fills.

Register both Draggable and InertiaPlugin, then call Draggable.create with type "x,y" and inertia: true. Use bounds to constrain the drag area and edgeResistance to control behavior past the bounds.

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