GSAP AI Skills is an official GreenSock repo that teaches AI coding agents how to write GSAP correctly.

It covers core tweens, timelines, ScrollTrigger, plugins, React/Vue/Svelte usage, and performance patterns.

The important part: GSAP says the library and plugins are now free through the public gsap npm package, so you do not need a Club membership or private registry for the old paid plugins.

For most AI editors, use the skills CLI installer.

$ npx skills add https://github.com/greensock/gsap-skills

For Claude Code, the repo also lists the plugin marketplace command.

$ /plugin marketplace add greensock/gsap-skills

For Cursor, add it as a Remote Rule with greensock/gsap-skills, or use the npx skills add command above if your setup supports it.

After installing the skills, do not just ask for a random animation. Tell the agent the stack, the elements, the motion order, and the constraints.

• Stack: vanilla JS, React, Next.js, Vue, Svelte, Webflow, etc.
• Target elements: hero title, cards, SVG path, product image, sections.
• Motion style: entrance, scroll-linked, pinned section, hover/tap interaction, timeline sequence.
• Constraints: mobile support, reduced motion, cleanup on unmount, no layout shift.

Good starter prompt:

• Use the GSAP skills. Build a scroll-triggered landing page animation in React. Use useGSAP, scoped refs, cleanup on unmount, ScrollTrigger, and transforms instead of layout properties. Keep it mobile-safe and include a reduced-motion fallback.

The skills teach the AI how to write better GSAP code, but your actual web project still needs GSAP installed.

$ npm install gsap @gsap/react

For ScrollTrigger, import and register the plugin once.

• import { gsap } from "gsap";
• import { ScrollTrigger } from "gsap/ScrollTrigger";
• gsap.registerPlugin(ScrollTrigger);

Hero entrance:

• Use GSAP skills to animate this hero. Create a timeline where the headline fades up, the subtext follows with a small delay, and the CTA scales in. Use autoAlpha, y, scale, and power2.out. Avoid animating top, left, or layout properties.

Scroll section:

• Use GSAP ScrollTrigger to pin this section while three cards animate in sequence. Use a timeline with scrub: true, responsive start/end values, and call ScrollTrigger.refresh() after images load.

React component:

• Refactor this React animation to use @gsap/react and useGSAP. Scope selectors to the container ref, register plugins once, and make sure animations clean up when the component unmounts.

If the AI writes animation code that technically works but feels cheap, ask it to rebuild with a timeline instead of scattered delay values.

For React and Next.js, ask for useGSAP, scoped refs, and cleanup. Most broken GSAP-in-React code comes from global selectors or missing cleanup.

For performance, ask the AI to animate transforms and opacity, not layout properties like top, left, width, or height unless there is a specific reason.