SkillInstalls cleanly

Teach your assistant web animation

GSAP AI Skills

Official GSAP skills that teach your assistant to write correct web animations: timelines, scroll effects and plugins for React, Vue and plain pages.

Works with
Claude Code, Codex CLI
Good for
Graphic designers

What it does

GSAP is a widely used library for moving things on web pages. These skills are the GSAP team's own instructions for AI assistants, so the code they write follows the current API.

Designers who hand off or build simple sites can ask for scroll effects, text reveals or page transitions in plain words.

Example prompts

  • "Animate the headline letter by letter when the page loads"
  • "Pin this section and fade images in while I scroll"
  • "Make the menu slide in smoothly on mobile"

How to install

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

How to use it

Ask for an animation on your page, e.g. fade the cards in as I scroll, and the assistant uses GSAP correctly.

Check it works

Ask the assistant which skills it has; gsap skills should be listed.

Common problems

  • The assistant does not use the skill — skills load when a session starts — close the assistant, open it again in your project folder and ask again.
  • The animation does nothing on the page — GSAP is not loaded in your project — ask the assistant to install GSAP in the project first.

What to watch out for

  • Edits code in your project folder

Licence and author

Licence
MIT
Author
greensock
Source code
github.com/greensock/gsap-skills

How we tested it

We installed it on an empty test computer on 13 Oct 2026. Installed and started in a clean test system. Not yet used in a real AI session.

Test level

Not yet used on real work.

Technical details of the test
Date
13 Oct 2026
Method
Intake sandbox run on 2026-10-13 in a clean container with no account: cloned the repository and checked its skill, agent and plugin files, ran "npx -y skills --help".

Checked again on 12 Oct 2026

Alternatives

  • Motion — another animation library for React and JavaScript
  • Motion Design Skill — timing principles, works with any library

FAQ

  • Q: Is it free? A: The repo is open source (MIT); any API keys or services it uses may cost money.
  • Q: Do I need to code? A: No, you describe what you want in plain words; the assistant does the rest.

Sources