gsap-setup

Install GSAP with npm install gsap, or load it via CDN script tags from jsdelivr. For React, also install @gsap/react, then create a central gsap.js module that registers plugins and sets global defaults.

Import the plugin from its path, such as gsap/ScrollTrigger, then call gsap.registerPlugin(ScrollTrigger) once at your app entry point. Registering all plugins in one place avoids redundant registration across files.

Yes, the @gsap/react package provides the useGSAP hook, which you register alongside other plugins. It scopes selectors to a component and automatically cleans up animations on unmount, preventing memory leaks.

The most common cause is forgetting to call gsap.registerPlugin(ScrollTrigger) before using scrollTrigger properties in a tween. Also verify the trigger element exists in the DOM and refresh ScrollTrigger after dynamic DOM changes.

Use the useGSAP hook in React, which cleans up automatically, or manually call kill() and killTweensOf() when components unmount. Never create tweens in useEffect without a cleanup function.

Since GSAP 3.13, formerly members-only plugins such as SplitText, MorphSVGPlugin, and DrawSVGPlugin ship in the public gsap npm package. Follow the standard license terms published on the GSAP site.