Skills

gsap-skills: teach an assistant to write GSAP animation the official way

For people who want an assistant to use the GSAP core API, timelines, or ScrollTrigger correctly; install the skills with the official npx command and the animation library from the public gsap package.

Official source · gsap-skills

Install

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

Who it's for

For people who want a coding assistant to use GSAP (GreenSock Animation Platform) the official way. Official wording: these are the official GSAP AI skills that teach correct usage, covering the core API, timelines, ScrollTrigger, plugins, plus React, Vue, Svelte, vanilla JS, and performance.

A better fit is someone already writing animation and about to check whether gsap.to() / from() / fromTo(), timeline sequencing, or scroll triggers are written correctly. Do not treat this skill set as the GSAP runtime itself: the animation library is installed from the public gsap npm package. Official wording: GSAP is 100% free, including every plugin; after the Webflow acquisition, former Club plugins (such as SplitText, MorphSVG) are free for everyone, including commercial use. No Club membership, .npmrc, auth token, or private registry is needed.

Before you start, you must be able to run npx skills add locally. Do not rewrite that command into another installer that is not given.

First try in 3 minutes

Use only the one install command in the repository. Finish skill install first, then have the assistant do a read-only check; do not change project files yet.

Preconditions: this environment can run npm/npx, and your assistant can load newly installed skills. On the first try, do not write animation code and do not connect an undocumented private source.

Install location: add the skills in the project or workspace with the official command.

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

Official repository:

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

GSAP product page:

https://gsap.com/

Low-risk trigger: after install, have the assistant only check whether an existing gsap.to() uses easing, duration, stagger, or defaults mentioned in the official core API. Do not let it change files first. If the next step would write timeline or ScrollTrigger code, confirm which files will change before running.

Success signal: the assistant can discuss gsap.to() / from() / fromTo() in gsap-core terms, instead of inventing skill names that are not listed. Which assistants can use this CLI is pointed to here:

https://github.com/vercel-labs/skills#supported-agents

Do not infer from one roster that “only these assistants work.”

Use cases

Case 1: Check a local core-animation write-up. Use gsap-core: the core API includes gsap.to() / from() / fromTo(), plus easing, duration, stagger, defaults. Fits people who already have a tween and want to check whether parameters drifted. Evidence only reaches these topics; there is no full function inventory. Do a read-only check first; if code will change, confirm side effects first.

Case 2: Check a local scroll animation. Use gsap-scrolltrigger: covers scroll linkage, pinning, scrub, triggers, plus refresh and cleanup. Fits pages that already have scroll triggers and need a check for missing refresh or cleanup. Inspect first, then decide whether to change files. The timeline skill gsap-timeline is on its own line in the original (sequencing, position parameter, labels, nesting, playback); do not merge it with ScrollTrigger into one skill.

Usage limits

Install skills with npx skills add https://github.com/greensock/gsap-skills . Install the GSAP library from the public gsap npm package. Do not treat those as the same step.

The skill lines named in the original are only gsap-core, gsap-timeline, gsap-scrolltrigger. Do not invent other skill names.

GSAP and former Club plugins are now free, including commercial use; the acquisition note is at:

https://gsap.com/blog/webflow-GSAP/

Do not install as if auth or a private source were required. The official text does not write the languages as an exclusive set, and it does not require using React, Vue, or Svelte at the same time.