Skip to content
Get packs

GSAP Plugins Guide

Guides the agent to correctly use GSAP plugins like ScrollToPlugin, Flip, Draggable and SplitText

Source Download skill
Repository
greensock/gsap-skills
Stars
17,719
Licence
MIT
Files
1 file

What it does

This skill gives an AI agent detailed reference knowledge about GSAP, a popular JavaScript animation library, and its plugins. Once installed, the agent knows how to register plugins, write correct code for scroll-to animations, layout transitions (Flip), drag-and-drop and throwing (Draggable), swipe and gesture detection (Observer), and text splitting, and it knows that all GSAP plugins are now free and installed from the public npm package rather than a paid registry. It only changes how the agent writes and reviews GSAP code; it does not run anything on its own.

Great for

  • Front-end developers adding GSAP animations to websites or web apps
  • Designers or developers reviewing existing GSAP code for outdated or incorrect plugin usage
  • Teams migrating older GSAP projects that relied on paid Club GSAP registry instructions

Skip it if

  • Non-JavaScript projects or animation tools that do not use GSAP, since the guidance would not apply
  • Core GSAP tweens or ScrollTrigger work, which the skill says belong to other skills (gsap-core, gsap-scrolltrigger)
  • Anyone expecting the agent to run or verify animations in a browser; the skill is documentation-style guidance only

Try asking

  • “Add smooth scroll-to-section navigation to my landing page using GSAP”
  • “Animate a grid reorder with Flip so items slide to their new positions”
  • “Make product cards draggable with inertia using GSAP Draggable”
  • “Review my project for outdated GSAP Club registry or .npmrc token instructions”
Step-by-step guide: how to use GSAP Plugins GuideInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    gsap-plugins.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip gsap-plugins.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 specific plugin (for example Flip or Draggable) in your request so the agent loads the right section of guidance.
  • Share your existing registration and import lines so the agent can check for missing gsap.registerPlugin calls.
  • Check the generated code against the official GSAP docs for the latest API details, since the skill links to them rather than including every option.

What's inside

  • SKILL.md

Redistributed unmodified from greensock/gsap-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.