Skip to content
Get packs

GSAP Web Animation

Teaches the agent to build and debug GSAP animations: timelines, ScrollTrigger, staggers and easing.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
5 files

What it does

This skill gives the agent a reference guide for GSAP, a widely used JavaScript animation library. Once installed, when you ask for animated web interfaces, such as entrance effects, sequenced timelines or scroll-driven sections, the agent follows the skill's patterns for timelines, easing, staggering and ScrollTrigger, and knows common fixes for janky or broken animations. The skill is text guidance: it contains code examples the agent can adapt, and it does not itself run code.

Great for

  • Front-end developers adding motion to HTML, CSS, JavaScript or React sites
  • Designers who want polished entrances, micro-interactions or scroll storytelling built in code
  • Developers debugging ScrollTrigger animations that do not fire or leak after navigation

Skip it if

  • Projects that only need simple CSS hover transitions, where GSAP adds unnecessary weight
  • Users who need guaranteed accessibility without checking: the skill mentions reduced motion only as a question to ask, not as built-in behaviour

Try asking

  • “Add a staggered hero entrance animation to my landing page using GSAP”
  • “Build a scroll-scrubbed pinned section where panels slide as the user scrolls”
  • “Debug why my ScrollTrigger animation isn't firing in this React component”
  • “Sequence the nav, title and call-to-action animations on page load using a timeline”
Step-by-step guide: how to use GSAP Web AnimationInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the MIT licence and an attribution note.

    gsap.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip gsap.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip gsap.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the framework (plain HTML, Next.js, Vue) so the agent applies the right cleanup and initialisation pattern.
  • Ask for reduced-motion support and mobile performance explicitly, since the skill only prompts for these.
  • Review the generated code in a browser; the agent's animation output still needs visual checking.

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • REFERENCES.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.