Chapter 27: gsap.registerPlugin()

Core Idea

gsap.registerPlugin() tells GSAP's core about a loaded plugin, ensuring the two integrate correctly and preventing bundlers from tree-shaking the plugin away.

Key Concepts

• Not a replacement for importing: you still need to import/load the plugin file itself — this call just registers it with core afterward.
• Idempotent: registering the same plugin multiple times is harmless.
• Auto-registration caveat: CDN/non-ESM builds try to self-register on load (as long as they load after core), but explicit registration is still recommended in build tooling to avoid tree-shaking.

Code Examples

import { gsap } from "gsap";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
import { TextPlugin } from "gsap/TextPlugin";

gsap.registerPlugin(MotionPathPlugin, TextPlugin);

• What it demonstrates: importing two plugins and registering both in a single call.

Key Takeaways

1. In bundler-based projects (webpack, Vite, etc.), skipping this step risks the plugin being tree-shaken out even though it's imported.
2. React projects should also register the useGSAP() hook to avoid version-mismatch issues.

Connects To

• Plugins overview: what capabilities plugins add beyond the core.