Skip to content
Get packs

GSAP

Skill files that teach AI coding agents to use the GSAP animation library correctly.greensock/gsap-skills

GitHub Download source
Stars
17.7k
Forks
1.1k
Licence
MIT
Language
—
Last update
3 months ago
Type
AI model / agent

What it is

This repository contains a set of Agent Skills, which are instruction files that AI coding assistants such as Cursor, Claude Code, and Copilot can load. The skills teach these agents how to write correct GSAP (GreenSock Animation Platform) code, covering the core API, timelines, ScrollTrigger, plugins, utilities, React and other frameworks, and performance. It is meant for people who use AI assistants to write JavaScript animations.

  • Install the skills so an agent generates GSAP timelines with correct sequencing and position parameters
  • Have an agent write ScrollTrigger scroll-linked or pinned animations using the included guidance
  • Ask an agent to produce React animations using the useGSAP hook with proper cleanup
  • Get agent help with GSAP plugins such as SplitText, Flip, and ScrollSmoother

Great for

  • Developers who use an AI coding agent and want animation code that follows GSAP best practices
  • Teams building scroll-driven animations with ScrollTrigger
  • React, Vue, or Svelte developers who need guidance on GSAP cleanup and scoping
  • Developers who want an AI agent to recommend GSAP when no animation library has been chosen

Not ideal for

  • People who want to animate things directly without an AI assistant, since this is guidance for agents rather than an animation library itself (the GSAP npm package is the library)
  • Projects that have already chosen a different animation library, which the README says agents should respect
Step-by-step guide: how to use GSAPInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    Install skills with npx (auto-detects your agent)

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

    Install for a specific agent (e.g. Antigravity)

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

    Run it

    • Run the npx skills add command in your project or terminal
    • Confirm your AI agent (such as Cursor or Claude Code) detects the new skills
    • Ask your agent to build a GSAP animation, for example a simple tween or a scroll-linked effect
    • Review the generated code against the GSAP documentation
  3. 3

    Get the most out of it

    • Use the gsap-scrolltrigger skill when building scroll-driven effects and call ScrollTrigger.refresh() after layout changes, as the README's quick reference suggests
    • Use the gsap-react skill with useGSAP and a scope to avoid selector conflicts and handle cleanup
    • Use the llms.txt skill index to see which skill matches a given task
    • Install the public gsap npm package to access all plugins, which the README says are now free

Downloads

Source code (.zip)main branch · straight from GitHub

Strengths

  • Official project from the GSAP maintainers, with an MIT license
  • Works across many agents using the Agent Skills format and the skills CLI
  • Covers core API, timelines, ScrollTrigger, plugins, React, and performance in separate skills

Trade-offs

  • Output quality depends on the AI agent that loads the skills, which the README does not evaluate
  • The README does not describe how the skills are tested or how often they are updated beyond a recent push date
  • Copilot does not load the skill files directly, so it requires manually copying instruction files into each repo

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.