gsap-plugins

Import each plugin from the gsap package and call gsap.registerPlugin() once before using it, for example gsap.registerPlugin(ScrollToPlugin, Flip, Draggable). 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 for commercial use and 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.

Use SplitText.create(target, { type: "chars" }) to split the element, then animate split.chars with a stagger, such as gsap.from(split.chars, { opacity: 0, y: 20, stagger: 0.03 }). Call split.revert() 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 also does not affect fill, and contents of <use> elements cannot be visually changed.

Register both Draggable and InertiaPlugin, then set inertia: true in Draggable.create along with a type like "x,y" and optional bounds. The element will continue with momentum and glide to a stop after release.

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(state) to animate the transition.