How to Teach an AI to Write GSAP Animations Without Errors

Familiar situation: you ask Claude or Cursor to sketch out a complex animation with ScrollTrigger, and you get code that either doesn't work or was written to five-year-old standards. AI often confuses syntax from different versions, forgets to register plugins, or ignores React lifecycle specifics.

The GreenSock team solved this elegantly. They released gsap-skills — a set of official instructions that "embed" up-to-date library knowledge directly into the AI agent.

Why is this needed if there is documentation

It might seem like popular LLMs already have access to the internet and a massive code base. But in practice, models were trained on a lot of garbage: old forum threads, outdated tutorials, and code from the jQuery era. As a result, AI might suggest TweenMax, which hasn't been used in years, or mess up memory cleanup in useEffect.

The gsap-skills project is not just a cheat sheet. It's structured rules in Agent Skills format. When you connect them to your editor (e.g., Cursor) or CLI agent (Claude Code), the AI starts understanding the library context the way GSAP's own creators do.

What's inside this set

Developers split the knowledge into logical blocks. This is convenient because you can load only what you need for your specific stack.

• gsap-core and gsap-timeline. The basics: how to properly chain animations, use position parameters, and avoid unnecessary delays through delay.
• gsap-scrolltrigger. Probably the most useful part. AI learns to properly configure scrub, pin, and, critically, call refresh() after layout changes.
• gsap-react. Best practices for using the useGSAP hook, working with refs and context. No more memory leaks because the neural network forgot about revert().
• gsap-performance. Optimization tips: when to use will-change, why transforms are better than changing top/left, and how to batch updates.

By the way, a nice bonus: after Webflow acquired GSAP, all plugins (including SplitText and MorphSVG) became free. This is also reflected in the AI instructions — it won't bother you with questions about private tokens and Club GSAP anymore.

How to connect your editor with these skills

The fastest way is to use the CLI. If you have Cursor or Claude Code installed, just run one command in the terminal:

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

For those who prefer full control, the repository has an skills/ folder. It contains .md files describing the logic for LLMs. You can simply copy them to your agent's rules directory (for example, in ~/.cursor/rules or similar folders for Windsurf and Copilot).

Practical benefit

Imagine you're building a complex landing page. Instead of manually googling how to sync MotionPath with page scroll, you just write in the Cursor chat: "Make the rocket fly along a curve on scroll."

Thanks to gsap-skills, the agent won't just spit out a random code snippet. It will:

1. Check if the MotionPath plugin is registered.
2. Use modern gsap.timeline({ scrollTrigger: { ... } }) syntax.
3. Suggest optimal performance settings.

Is it worth implementing

If you use GSAP once every six months just to fade in a heading smoothly, you can probably skip this. But if animations are an important part of your frontend, gsap-skills will save you a ton of time debugging AI "hallucinations."

Interestingly, GreenSock was one of the first among major libraries to create such an official AI config. More than likely, this will soon become a standard for all popular tools. While the project documentation looks minimal, the knowledge base inside the SKILL.md files is dense enough that the agent will stop making mistakes on basic things.

It's definitely worth trying, especially if you're heavily invested in Cursor or Claude Code. This is one of those cases where a small tool configuration noticeably changes the quality of the output code.