How to set up GSAP Skills in Claude Code and Codex

GSAP is a free animation library that many websites use for their motion. GSAP Skills are the official skills from the team behind it, and they show your AI the patterns GSAP's makers recommend when it writes animations for your pages.

You get eight skills, covering things like scroll effects and keeping animations smooth. Your AI reads the one that fits your request. GSAP itself is free for business sites too, with no account needed.

You need Node.js on your computer. Inside your project folder, run:

npx skills add https://github.com/greensock/gsap-skills --agent claude-code -y

This adds the eight skills to .claude/skills in that project, and Claude Code picks them up the next time you open it there.

Open your project in Claude Code or Codex and paste one of these, with your own pages in it:

Use the GSAP skills to make my homepage headline and button fade in gently when the page loads, in under one second.

Use the GSAP skills to slide each section of my services page in as visitors scroll, and turn it off for visitors whose phone is set to reduce motion.

Use the GSAP skills to check the animations on my site for anything that stutters on a phone, and fix it.

It works on sites your AI builds and edits in code. If your site lives in a drag-and-drop site builder, your AI can't add these animations there.

Too much motion can make a page feel busy and slow to use. Ask for one or two effects first and look at the page on your phone before you add more.