GSAP Skills

Pick a task and get started

Install the skills in the target workspace, confirm that your assistant can discover the gsap-* references, then check runtime dependencies. The tasks below cover inputs, implementation and browser verification.

1. Install official GSAP guidance

   Copy install command

   Run the author’s command in a terminal with Node.js installed. Follow the installer to choose your client and required skills.

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

   Read the author’s setup guide

   Check the runtime before animating a component

   A normal page needs gsap; the React hook also needs @gsap/react. The author’s React example declares gsap ^3.15.0 and @gsap/react ^2.1.2. Those are example dependency ranges, not mandatory upgrades for an existing app.

   Inspect example dependencies

2. Give your AI this first task

   Copy prompt

   These are editorial tasks based on official sources, not completed demonstrations. Replace bracketed inputs and distinguish checks performed from those still pending.

   Use gsap-core, gsap-timeline and gsap-react to update [hero component] in [React/Next.js project]. Inputs are [real heading, image, action and intended motion]. Inspect package.json, the component and routes first. Identify the framework, package manager, installed GSAP and @gsap/react versions; keep the existing lockfile system. If dependencies are missing, identify the project-local installation needed. The author documents npm install gsap and npm install @gsap/react; installing the skills does not install these runtime packages. Limit changes to this component and necessary styles. Scope selectors with a container ref, register useGSAP, and create one timeline with labels/defaults in the client lifecycle. State the heading, image and button start times and durations before implementing restrained transform/opacity motion. Use a timeline rather than a chain of delays. In Next.js, follow the project's client-component boundary and avoid DOM access during server rendering. Use gsap.matchMedia for prefers-reduced-motion, showing complete content immediately when reduction is requested. Text and actions must remain usable before JavaScript runs. Reuse or restart the same timeline on repeated playback. If changing dependencies requires a rebuild, set dependencies and revertOnUpdate intentionally. Wrap callbacks that create animations later in contextSafe; separately remove native listeners, clear timers and cancel obsolete async continuations. contextSafe is not a cancellation mechanism. Check two instances on one page, development remounting, three leave-and-return cycles, repeated clicks, a narrow viewport, keyboard access and reduced motion. Deliver changed files, commands actually run, timing notes and per-check results. Mark anything not run as untested.

3. Check what you receive

   • Scoped hero animation code with explicit timing.
   • Actual checks for remounts, return visits, narrow layouts and reduced motion.
   Read the author’s notes for this task