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 text into elements, then animate split.chars with a stagger tween. Call split.revert() or use gsap.context() for cleanup when the component unmounts.

No. All GSAP plugins are free, including for commercial use, and are included in the public gsap npm package. Do not create an .npmrc with a GreenSock auth token or use the private npm.greensock.com registry.

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 not on fill or contents of use elements.

Register both Draggable and InertiaPlugin, then set inertia: true in Draggable.create(). The element will continue moving with momentum after release, with callbacks like onThrowUpdate available during the glide.

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