gsap-plugins

Import each plugin from the gsap package and call gsap.registerPlugin() once before using it in any tween. In React, register at the top level or once in the app, not inside a component that re-renders.

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.

Register SplitText, then call SplitText.create(target, { type: 'words, chars' }) and animate the returned chars array with stagger. Use autoSplit with onSplit so animations re-run correctly when fonts load or the element resizes.

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

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, grids, or expanded panels. Capture state with Flip.getState(), change the DOM, then call Flip.from() to animate from the old state to the new one.