GSAP Plugins Skill: Supercharge Your Animation Workflows

Where this fits

You're reviewing a pull request that introduces a ScrollToPlugin animation, but the import is missing gsap.registerPlugin(), and the easing curve uses CustomEase without the proper plugin loaded. Without deep GSAP plugin knowledge, you or your agent would miss these subtle breaking points. The gsap-plugins skill gives your agent the exact steps to register, configure, and troubleshoot every official GSAP plugin—from ScrollToPlugin to CustomWiggle—so animation code runs reliably.

Why agents benefit

• Detects missing plugin registration: Catches absence of gsap.registerPlugin(ScrollToPlugin) before code hits runtime, preventing cryptic "plugin not found" errors.
• Recommends correct plugin APIs: Knows that Flip needs Flip.fit() or that Observer is for scroll-driven interactions—no more guessing.
• Handles licensing nuances: Confirms all plugins are free (post-Webflow acquisition), so agents don't waste time searching for license keys or membership checks.
• Distinguishes overlapping skills: Routes ScrollTrigger questions to gsap-scrolltrigger and core tweens to gsap-core, avoiding duplicated logic or wrong plugin usage.
• Validates SVG and text animations: For DrawSVG, MorphSVG, SplitText, and ScrambleText, the skill provides exact syntax and ordering, reducing trial-and-error during code review.

Practical scenarios

Converting a scroll-triggered animation to ScrollSmoother

Your agent is refactoring a landing page to use ScrollSmoother for buttery scroll. Without the skill, it might accidentally combine ScrollTrigger and ScrollSmoother incorrectly, causing jittery pinning. The skill explains how to wrap content, enable smooth scrolling, and handle pinning interplay.

Building a draggable slider with physics and easing

You ask your agent to add inertia to a draggable carousel. It needs to register Draggable and InertiaPlugin, then configure throwProps with CustomEase. The skill provides the exact plugin registration order and a working CustomEase creation example—like CustomEase.create("custom", "M0,0 C0.25,0.1 0.25,1 1,1")—so the motion feels natural.

Debugging a split-text reveal that fails silently

Your agent is investigating why SplitText text isn't animating. The skill reminds it to call split.toArray() to get the individual characters, and to check whether the parent has overflow: hidden. It also shows how to use GSDevTools to visually inspect the timeline during development.

Add it to your agent workflow

Install the skill directly from the GitHub repo:

npx skills add greensock/gsap-skills --skill gsap-plugins

Then, in an agent prompt, simply say: "Check if the scroll-to animation is correctly registered and uses the proper plugin API." The agent will pull the skill's instructions and provide a precise fix. For a full reference, see the official skill listing.

Compare before adopting

Before locking this in, evaluate alternatives like generic animation skills (which lack plugin-specific depth) or hallucinated custom prompts. Check the skill's maintenance freshness—this repo is actively maintained by Greensock, the library's creator. Verify it fits your workflow: if you never use GSAP plugins, skip it; if you do, it's a no-brainer.

Why it is worth tracking

With 13,866 stars and official stewardship from greensock, this skill carries exceptional quality signals: it's versioned with the library, updated for Webflow-era licensing, and clearly delineated from sibling skills. Watch its release cadence—if GSAP ships new plugins or API changes, this skill will be the first to document them. Evaluate it whenever you introduce GSAP into a project or when an agent consistently struggles with plugin interactions.