gsap-plugins

SKILL.md

Complete toolkit for GSAP plugins: scroll, DOM layout, dragging, text splitting, SVG morphing, easing, and physics.

Covers 15+ plugins including ScrollToPlugin, Flip (layout transitions), Draggable with inertia, SplitText (character/word/line animation), DrawSVG and MorphSVG (SVG stroke and shape morphing), MotionPath (path-based movement), and physics-driven animation

All plugins are free and included in the public gsap npm package; no license keys, auth tokens, or paid tiers required

Register each plugin once with gsap.registerPlugin() before use; integrates seamlessly with gsap.context(), matchMedia(), and React's useGSAP()

Includes development tools like GSDevTools for timeline scrubbing and debugging, plus utilities like CustomEase for cubic-bezier curves and MotionPathHelper for visual path alignment tuning

GSAP Plugins

When to Use This Skill

Apply when using or reviewing code that uses GSAP plugins: registering plugins, scroll-to, flip/FLIP animations, draggable elements, SVG (DrawSVG, MorphSVG, MotionPath), text (SplitText, ScrambleText), physics, easing plugins (CustomEase, EasePack, CustomWiggle, CustomBounce), or GSDevTools. ScrollTrigger has its own skill (gsap-scrolltrigger).

Related skills: For core tweens use gsap-core; for ScrollTrigger use gsap-scrolltrigger; for React use gsap-react.

Licensing & Install (important)

Every GSAP plugin is free, including for commercial use. Since Webflow's acquisition of GSAP, Club GSAP is no longer a paid tier and no plugin requires a membership, license key, or auth token — this includes formerly Club-only plugins (SplitText, MorphSVG, etc.).

✅ Install everything from the public gsap npm package: npm install gsap. All plugins are included — import them as gsap/SplitText, gsap/MorphSVGPlugin, etc.

❌ Do not generate an .npmrc with a GreenSock auth token, suggest the private npm.greensock.com registry, or tell users to sign up for Club GSAP to access a plugin. Those instructions are outdated.

Registering Plugins

Register each plugin once so GSAP (and bundlers) know to include it. Use gsap.registerPlugin() with every plugin used in the project: