GSAP Just Dropped Official AI Skills for Your Coding Agent

If you've ever wanted to tell Cursor, Copilot, or Claude to "build a scrolling parallax hero with staggered fade-ins" and actually get working GSAP code back, you're in luck. The GreenSock team just released official AI skills for GSAP, and they're live on GitHub now.

These aren't just random prompt templates. They're structured skill files that teach your AI coding assistant the specifics of GSAP's API — timelines, ScrollTrigger, and the newly free plugins that used to be behind a membership wall.

What It Does

The repo at greensock/gsap-skills contains curated instruction sets designed to be loaded into AI coding tools like Cursor, Windsurf, Copilot, or any agent that supports custom skills or instructions.

Each skill file is a focused Markdown document that explains a specific GSAP concept — like how ScrollTrigger.create() works, how to chain tweens in a timeline, or how to use the old paid-for plugins like Flip, MotionPath, DrawSVG, and others that are now freely available.

The goal? When you ask your AI agent to "add a scroll-triggered horizontal scroll section with scrub," the AI doesn't guess at syntax. It references the official skill and writes correct GSAP code the first time.

Why It's Cool

This solves a real pain point. AI models are great at generating JavaScript, but they're terrible at remembering the specific API of any library that isn't React or jQuery. GSAP has a lot of edge cases — to(), from(), fromTo() each have different behaviors. ScrollTrigger has 20+ config options. Timelines can be tricky to nest properly.

With these skills, the AI knows:

• That ScrollTrigger needs trigger, start, end, and scrub wired correctly
• How to use gsap.to() vs gsap.fromTo() vs gsap.set()
• The new plugin names and their syntax (since they're now free)
• Best practices like cleaning up timelines on component unmount

It's not magic, but it saves you from the "oh, that's close but not quite right" loop where you have to correct the AI's output six times.

How to Try It

1. Clone the repo or copy the skill file you need:

   git clone https://github.com/greensock/gsap-skills.git
   

2. Depending on your AI coding tool, you'll either:

   • Cursor/Windsurf: Add the skill file to your project's .cursorrules or windsurf.rules directory
   • GitHub Copilot: Reference it in your .github/copilot-instructions.md
   • Any agent: Copy-paste the relevant section into your system prompt or instruction file

3. Then just ask for what you want. Try something like:

   "Create a ScrollTrigger animation that fades in cards one by one as the user scrolls down."
   

The AI should now produce proper GSAP with gsap.from() inside a ScrollTrigger.create() wrapper.

Final Thoughts

This is exactly the kind of thing that makes AI coding tools actually useful for real projects. Instead of fighting the AI over syntax details, you offload that knowledge to a curated reference file and focus on the design intent.

If you're building scroll-heavy landing pages, product demos, or anything animation-forward, these skills will save you time. Plus, it's a smart move from GSAP — making their library easier to use with AI probably drives way more adoption than any blog post could.

Give it a spin, and let us know if your AI finally stops writing gsap.to("element", {opacity: 1}) without the quotes in the right place.

Found this useful? Follow @githubprojects for more dev tools and repos.