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 components that re-render.

No. Since Webflow's acquisition of GSAP, every plugin is free including for commercial use. Install everything from the public gsap npm package; no auth token, license key, or private registry is needed.

Register SplitText, then call SplitText.create(target, { type: "chars" }) and animate the returned split.chars array with a stagger. Call split.revert() or use gsap.context() cleanup when the element unmounts.

DrawSVG only animates strokes, so the SVG element must have a visible stroke and stroke-width set in CSS or attributes. It works on path, line, polyline, polygon, rect, and ellipse elements, but not on fill or contents of use elements.

Set the shapeIndex option to control which start point maps to the first end point. Use shapeIndex: "log" once to log the auto-calculated value, then paste that number or array into the tween; findShapeIndex() offers an interactive UI.

Use Observer when you need normalized swipe, wheel, or scroll-direction input without tying animation to scroll position. ScrollTrigger is for scroll-linked animation and has its own dedicated skill.