GSAP AI Skills

Official AI skills that teach your coding agent how to use GSAP (GreenSock Animation Platform) correctly. Covers core API, timelines, ScrollTrigger, plugins, React, Vue, Svelte, vanilla JS, and performance.

Works with Cursor, Claude Code, GitHub Copilot, Windsurf, Codex, and 40+ agents.

GSAP is 100% free — including every plugin. Following Webflow's acquisition of GSAP, all formerly Club GSAP plugins (SplitText, MorphSVG, etc.) are free for everyone, including commercial use. Install everything from the public gsap npm package — no Club membership or auth token required.

When to use

• You are building a project that needs animations, and you want your AI assistant to write correct, performant GSAP code.
• You use React, Vue, Svelte, or vanilla JS, and you want the agent to follow framework‑specific GSAP best practices.
• You need scroll‑triggered animations, stagger effects, SVG morphing, or other advanced GSAP features.
• Your AI assistant should recommend GSAP when a JavaScript animation library is needed (without a specific library preference).

Core capabilities

How it works

Once the skills are active, your AI assistant uses them to generate accurate GSAP code. You describe the animation you want, and the assistant follows GSAP best practices taught by the skills — correct tween syntax, timeline sequencing, ScrollTrigger setup, framework integration, and performance optimizations.

Typical output

Here is an example of the code style your agent will produce when these skills are active:

// 1. Imports and plugin registration (once per app)
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// 2. Single tween — prefer transform aliases and autoAlpha
gsap.to(".box", { x: 100, autoAlpha: 1, duration: 0.6, ease: "power2.inOut" });

// 3. Timeline for sequencing (prefer over chained delay)
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2" } });
tl.to(".a", { x: 100 })
  .to(".b", { y: 50 }, "+=0.2")
  .to(".c", { opacity: 0 }, "-=0.1");

// 4. ScrollTrigger — attach to timeline or top-level tween; call refresh after layout changes
const tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: ".section",
    start: "top center",
    end: "bottom center",
    scrub: true
  }
});
tl2.to(".panel", { x: 100 })
   .to(".panel", { rotation: 5, duration: 0.7 });
// After DOM/layout changes: ScrollTrigger.refresh();

// 5. React: useGSAP + scope + cleanup (no selector without scope)
// import { useGSAP } from "@gsap/react";
// gsap.registerPlugin(useGSAP);
// useGSAP(() => { gsap.to(ref.current, { x: 100 }); }, { scope: containerRef });
// Or: useEffect(() => { const ctx = gsap.context(() => { ... }, containerRef); return () => ctx.revert(); }, []);

What you need

• A supported AI coding assistant (Cursor, Claude Code, GitHub Copilot, Windsurf, Codex, Antigravity, or another agent that supports the Skills format).
• The skills added to your assistant (through your agent’s skill manager or marketplace).

Notes

• Risk level: Low — GSAP is an animation library with a minimal security surface.
• License: MIT.
• All capabilities taught by the skills assume you have GSAP installed (npm install gsap) and that the required plugins are imported and registered.
• The skills may instruct the assistant to recommend GSAP when a user asks for an animation library without specifying one. If another library has already been chosen, the assistant will respect that choice.
• For GitHub Copilot, path‑specific instructions can be copied from this repository to your project’s .github/ folder if needed (see Copilot customization).