gsap-plugins

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

greensock ↓ 34k

Claude Code

View source ↗

What it does

✅ Install everything from the public gsap npm package: npm install gsap. All plugins are included — import them as gsap/SplitText, gsap/MorphSVGPlugin, etc.
✅ Register before using the plugin in any tween or API call.
✅ Register every plugin used with gsap.registerPlugin() before first use.
✅ Use Flip.getState() → DOM change → Flip.from() for layout transitions; use Draggable + InertiaPlugin for drag with momentum.
✅ Revert plugin instances (e.g. SplitTextInstance.revert()) when components unmount or elements are removed.
❌ Use a plugin in a tween or API without registering it first (gsap.registerPlugin()).
❌ Ship GSDevTools or development-only plugins to production.

Requirements & configuration

❌ 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.
✅ In React, register at top level or once in the app (e.g. before first useGSAP); do not register inside a component that re-renders. useGSAP is a plugin that needs to be registered before use.
| inertia | true to enable throw/momentum (requires InertiaPlugin) |

Derived from the skill's own SKILL.md documentation · extracted 2026-07-23

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

Source

Repository: https://github.com/greensock/gsap-skills

gsap-plugins FAQ

What does the gsap-plugins skill do?

Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration. ✅ Install everything from the public gsap npm package: npm install gsap. All plugins are included — import them as gsap/SplitText, gsap/MorphSVGPlugin, etc. ✅ Register before using the plugin in any tween or API call.

What does gsap-plugins require?

❌ 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. ✅ In React, register at top level or once in the app (e.g. before first useGSAP); do not register inside a component that re-renders. useGSAP is a plugin that needs to be registered before use. | inertia | true to enable throw/momentum (requires InertiaPlugin) |

How do I install gsap-plugins?

Run: npx -y skills add https://github.com/greensock/gsap-skills --skill gsap-plugins --agent claude-code — the source lives at github.com/greensock/gsap-skills.

Maintain gsap-plugins?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![gsap-plugins on getagentictools](https://getagentictools.com/badge/skills/greensock-gsap-skills-gsap-plugins.svg)](https://getagentictools.com/skills/greensock-gsap-skills-gsap-plugins?ref=badge)

npx agentictools info skills/greensock-gsap-skills-gsap-plugins

The second line is the CLI lookup for this page — handy in READMEs and docs.