Guide · Agent skill
How to use the GSAP Plugins Guide agent skill (gsap-plugins)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The gsap-plugins skill is a set of written guidance that teaches an AI coding agent how to use GSAP's plugins correctly. It is for front-end developers adding GSAP animations to websites or web apps, and for anyone reviewing older GSAP code. After this guide you will know what the skill changes, how to install it, how to ask for help in natural language, and what it needs to run alongside your project.
GSAP Plugins Guidegreensock/gsap-skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the gsap-plugins skill ZIP from our page and unzip it on your computer.
- 2Place the skill folder. Move the gsap-plugins folder containing SKILL.md into ~/.claude/skills/ for personal use, or into .claude/skills/ inside your project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the ZIP.
- 4Install the gsap package. In your web project, run npm install gsap to get every plugin, which requires Node.js and npm.
- 5Ask in plain language. Describe the plugin task, such as a Flip layout change or a Draggable element, and check the returned code in your project.
What the gsap-plugins skill makes the agent do
GSAP is a JavaScript animation library, and this skill covers its plugins: registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce and GSDevTools. Once installed, the agent has reference knowledge of how these plugins are registered and called, so it can write or review code that follows the official patterns.
The skill only changes how the agent writes and reviews GSAP code. It does not run anything on its own, and it does not open a browser to check the animations it writes.
How to install the gsap-plugins skill
Download the ZIP file for the skill from our page and unzip it. Place the unzipped gsap-plugins folder, which contains SKILL.md, in one of two locations. For a personal setup, use ~/.claude/skills/. For a single project, use the .claude/skills/ folder inside that project.
You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the ZIP there.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills
How to trigger the skill with natural requests
You do not need a special command. The skill's description tells the agent when to use it: questions about a GSAP plugin, scroll-to, flip animations, draggable elements, SVG drawing, or plugin registration. Ask in plain language and name the plugin or effect you want.
Good requests name both the goal and the plugin, for example asking how to register Flip before using it, or asking for a draggable card that snaps back within bounds. The more specific your request, the more useful the code will be.
- Register ScrollToPlugin and scroll the page to the #pricing section with a 50px offset.
- Make these list items animate to their new positions when I reorder them with Flip.
- Review this file and tell me if the Draggable setup is outdated.
- Split my heading into words and animate them in with SplitText.
Example: register plugins and scroll to a section
Plugins must be registered before you use them. The skill's pattern is to import each plugin from the gsap package and pass them all to gsap.registerPlugin() once. ScrollToPlugin then scrolls the window to an element, with an optional pixel offset.
The skill notes that you should register before using the plugin in any tween or API call. In React, register at the top level or once in the app, not inside a component that re-renders.
import gsap from "gsap";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import { Flip } from "gsap/Flip";
import { Draggable } from "gsap/Draggable";
gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });What the skill needs and how it stays safe
You need Node.js and npm, because all plugins come from the public gsap npm package. Install it with npm install gsap. That package includes every plugin, and you import them as gsap/SplitText, gsap/MorphSVGPlugin and so on. You also need a web project that uses JavaScript, and React is optional for useGSAP.
The skill is documentation-style guidance. It runs no scripts and uses no network access. Your own npm install is the only step that downloads anything, and that happens in your project, not through the skill.
- Runs scripts: no
- Uses network: no
- Files included: SKILL.md
Tips for getting reliable code
Check every import and registration the agent writes, and run the code in your own project, since the skill cannot test animations. If you are updating an older project, ask the agent to review it. The skill specifically flags outdated Club GSAP instructions, such as generating an .npmrc with an auth token or suggesting a private registry. It states that all plugins are free, including for commercial use, and that no plugin needs a membership, license key or token.
Core tweens and ScrollTrigger belong to other skills. The source names gsap-core for core tweens, gsap-scrolltrigger for ScrollTrigger and gsap-react for React. Install those alongside this one if your project uses them.
- Ask for one plugin at a time to keep answers focused.
- Say which GSAP features your project already uses so the code matches.
- Install the gsap-core and gsap-scrolltrigger skills for core tweens and ScrollTrigger work.
What people use it for
- Adding a smooth scroll-to-section link with ScrollToPlugin and a pixel offset for a fixed header.
- Animating a grid or list between layouts with Flip.getState() and Flip.from().
- Building a draggable card or slider that stays inside bounds and throws with inertia.
- Detecting swipe directions on a touch area with Observer.
- Reviewing an older project to replace outdated Club GSAP registry instructions with the public npm setup.
Frequently asked questions
Is the GSAP plugins skill free?
The skill is licensed under MIT. The source also states that every GSAP plugin is free, including for commercial use, and that no plugin needs a membership, license key or auth token.
Do I need a Club GSAP membership to use SplitText or MorphSVG?
No. The source says formerly Club-only plugins such as SplitText and MorphSVG are included in the public gsap npm package. Install them with npm install gsap and import them as gsap/SplitText or gsap/MorphSVGPlugin.
What do I need to install the gsap-plugins skill?
Download the ZIP from our page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings, Capabilities, Skills in the Claude apps. The skill itself has no install script.
Does the gsap-plugins skill run code or access the internet?
No. The skill is documentation-style guidance, with no scripts run and no network use. Only your own npm install of the gsap package downloads anything.
Can the skill test my animations in the browser?
No. The skill only changes how the agent writes and reviews GSAP code and does not run or verify animations. Test the output in your own project.
Is this skill a replacement for gsap-core or gsap-scrolltrigger?
No. Core tweens belong to gsap-core and ScrollTrigger belongs to gsap-scrolltrigger, so install those skills too when your project needs them. This skill covers the plugins.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer adding GSAP plugins to a JavaScript project, or if you need to bring an older GSAP codebase up to the current free npm setup. Pick something else if your project does not use GSAP, if you need core tween or ScrollTrigger help only, or if you expect the agent to run and check animations in a browser.
Download the skill