gsap-plugins

Call gsap.registerPlugin() once with every plugin you use, before any tween or API call that references them. In React, register at the top level of the app rather than inside a component that re-renders.

Use SplitText.create(target, { type: "words, chars" }) to split the element, then tween split.chars with a stagger. For custom fonts, split after fonts load or use autoSplit: true with an onSplit callback that returns the animation.

ScrollToPlugin animates the scroll position of the window or an element to a target, such as scrolling to a section. ScrollTrigger ties animations to scroll position and is covered by the separate gsap-scrolltrigger skill.

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 call Draggable.create with inertia: true and optionally set bounds and type. The element will glide to a stop after release using tracked velocity.

No. GSDevTools is a development-only debugging UI for scrubbing timelines and toggling animations. Register and create it during development, but exclude it from production bundles.