gsap-plugins

Import each plugin from the gsap package and call gsap.registerPlugin() with all plugins before using them in any tween. In React, register once at the top level rather than inside components that re-render.

Yes, all GSAP plugins are free including for commercial use since Webflow's acquisition of GSAP. Install everything from the public gsap npm package; no Club GSAP membership, license key, or auth token is required.

Use SplitText.create() with type set to chars, words, or lines, then animate the returned arrays with stagger. Call revert() when the component unmounts, or use autoSplit with onSplit() to handle re-splitting on font load or resize.

DrawSVG only animates strokes, so the target element must have a visible stroke and stroke-width set in CSS or as SVG attributes. Without a stroke, nothing is drawn regardless of the drawSVG values.

Register both Draggable and InertiaPlugin, then set inertia: true in Draggable.create(). This enables throw physics so the element glides to a stop after release, with onThrowUpdate and onThrowComplete callbacks available.

GSDevTools is a development-only debugging UI for scrubbing timelines and toggling animations. It should never be included in production builds; register and create it only during development.