What is the gsap-plugins skill?
gsap-plugins is an official SKILL.md in the greensock/gsap-skills repository. It covers GSAP plugin use for an AI coding agent: registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Observer, SplitText, SVG plugins, custom eases, physics, GSDevTools, and the current licensing and install path.
gsap-plugins is the plugin reference skill in the official greensock/gsap-skills set. It applies when an agent uses a GSAP plugin or asks about registering plugins, scroll helpers, drag, text splitting, SVG morphing, custom eases or development tools.
Core tweens stay in gsap-core, ScrollTrigger in gsap-scrolltrigger and React wiring in gsap-react.
What changes in your agent's output
- Plugins come from the public gsap package and are imported by path, such as
gsap/SplitTextorgsap/MorphSVGPlugin. - The agent no longer writes an
.npmrcwith an auth token or points to a private registry. The skill calls those instructions outdated. - Every plugin is registered with
gsap.registerPlugin()before its first use, once and not inside a re-rendering component. - Layout transitions use
Flip.getState(), a DOM change, thenFlip.from(). - Plugin instances such as SplitText are reverted on unmount.
Plugins the skill documents
Sections cover ScrollToPlugin, ScrollSmoother, Flip, Draggable, InertiaPlugin and Observer for scroll and UI. Text has SplitText and ScrambleText. SVG has DrawSVG, MorphSVG, MotionPath and MotionPathHelper.
The rest covers CustomEase, EasePack, CustomWiggle and CustomBounce for easing, Physics2D and PhysicsProps for physics, GSDevTools for development and PixiPlugin.
Who the gsap-plugins skill is for
Best for
- Work that needs text splitting, SVG line drawing or shape morphing, or draggable and flip-style layout motion.
- Agents that still suggest Club GSAP sign-ups or private registry tokens.
- Pairing with review-animations to audit whether each effect earns its weight.
Not for
- Basic tweens and easing, which gsap-core handles.
- Production builds that ship GSDevTools. The skill lists that as a mistake.
How to install GSAP Plugins Skill: Flip, SplitText and More
git clone https://github.com/greensock/gsap-skills.git/plugin marketplace add greensock/gsap-skills, which the README documents.Clone the repository
Run
git clone https://github.com/greensock/gsap-skills.git. The skill is the skills/gsap-plugins folder, which holds one SKILL.md.Copy the skill folder
Copy skills/gsap-plugins into your agent's skills directory. The README lists ~/.claude/skills/ for Claude Code, ~/.cursor/skills/ for Cursor, ~/.config/opencode/skills/ for OpenCode and ~/.codex/skills/ for OpenAI Codex.
Install GSAP in the project
The skill guides the agent's code but does not add the library. Add the gsap package to your project with your package manager. It includes every plugin.
Import plugins by path
Plugins come from the same gsap package. Import each one from its own path, and register it before the first tween that uses it.
Ask for animation work
Describe the motion you want, such as a staggered card entrance, and name the skill if your agent needs a nudge.
Check that it loaded
Ask the agent to split a headline into words and animate them in. The result should import gsap/SplitText, register it first, and revert the split on cleanup.
Key features
- Current licensing and installInstall everything from the public gsap package. All plugins are included and import as
gsap/SplitText,gsap/MorphSVGPluginand so on. - Outdated instructions blockedDo not generate an
.npmrcwith a GreenSock token, suggest the private registry, or tell users to join Club GSAP to reach a plugin. - Registration rulesRegister each plugin before first use. In React, register at top level or once in the app, and remember that useGSAP is itself a plugin to register.
- Scroll pluginsScrollToPlugin animates scroll position with a
scrollToconfig. ScrollSmoother adds smooth scrolling and works alongside ScrollTrigger. - Flip, Draggable and ObserverFlip animates layout changes from captured state. Draggable and InertiaPlugin give drag with momentum, and Observer normalizes wheel, touch and pointer input.
- SplitTextSplit by chars, words or lines. Split only what you animate, split custom fonts after they load, and use
autoSplitwithonSplit()where needed. - DrawSVG and MorphSVGDrawSVG animates the visible segment of a stroke and needs a visible stroke. MorphSVG morphs between paths and offers
shapeIndexfor twisted morphs. - Easing and physics pluginsCustomEase, EasePack, CustomWiggle and CustomBounce extend easing. Physics2D and PhysicsProps animate with velocity and acceleration.
- Cleanup and dev-only toolsRevert plugin instances on unmount, and keep GSDevTools and other development-only plugins out of production.
Frequently asked questions
What is the gsap-plugins skill?
It is the skills/gsap-plugins folder in the greensock/gsap-skills repository. Its SKILL.md gives an AI coding agent official guidance for GSAP plugins: registration, scroll helpers, Flip, Draggable, SplitText, SVG plugins, custom eases, physics and development tools.
How do I install gsap-plugins?
Clone greensock/gsap-skills and copy skills/gsap-plugins into your agent's skills folder. The README lists folders for Claude Code, Cursor, OpenCode and OpenAI Codex. Then add the gsap package to your project, which already bundles every plugin.
Are GSAP plugins free according to the skill?
The skill says to install everything from the public gsap package with all plugins included, and tells agents not to suggest Club GSAP sign-ups, private registries or auth tokens. The repository README says GSAP is free, including plugins, even for commercial use.
Which plugins does the skill cover?
It documents ScrollToPlugin, ScrollSmoother, Flip, Draggable, InertiaPlugin, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, MotionPathHelper, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, GSDevTools and PixiPlugin, grouped by use: scroll, DOM and UI, text, SVG, easing, physics and development tools.
Do I need to register plugins?
Yes. Register each plugin with gsap.registerPlugin() before using it in a tween or API call. In React, register once at top level or app level and not inside a component that re-renders. The skill lists skipping registration as a mistake.
Where do scroll triggers fit?
ScrollTrigger has its own skill, gsap-scrolltrigger. This one covers ScrollToPlugin and ScrollSmoother for scroll helpers, and its related-skills line says to use gsap-scrolltrigger for the trigger plugin itself, so the two skills stay distinct.
Should GSDevTools ship to production?
No. The Do Not list says not to ship GSDevTools or other development-only plugins to production. Use them while building to scrub and debug animations, and leave them out of the production bundle.