Gsap Plugins
Register and apply GSAP plugins (ScrollTo, Flip, Draggable, SVG, text, easing, GSDevTools) correctly in web animation code without outdated Club licensing steps.
Overview
gsap-plugins is an agent skill for the Build phase that guides correct registration and use of official GSAP plugins from the public npm package.
Install
npx skills add https://github.com/greensock/gsap-skills --skill gsap-pluginsWhat is this skill?
- Covers plugin registration and usage for ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText,
- Documents CustomEase, EasePack, CustomWiggle, CustomBounce, and GSDevTools alongside core plugin APIs
- Clarifies post-Webflow licensing: all plugins ship free in the public `gsap` npm package—no Club key or `.npmrc` auth
- Points to gsap-core, gsap-scrolltrigger, and gsap-react for adjacent work
- Explicit boundary: ScrollTrigger scenarios belong to the gsap-scrolltrigger skill, not this one
- Documents ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG/physics plugi
- All plugins install from the single public `gsap` npm package with no membership or auth token
Adoption & trust: 19.6k installs on skills.sh; 8.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need scroll, drag, SVG, or text GSAP effects but agents mix up plugin names, licensing, and imports with ScrollTrigger or paid-tier myths.
Who is it for?
Solo builders shipping animated landing pages, portfolios, or app UIs who already use or plan to use GSAP beyond basic tweens.
Skip if: Teams that only need ScrollTrigger scroll scenes (use gsap-scrolltrigger) or non-web stacks with no GSAP dependency.
When should I use this skill?
User asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, plugin registration, or easing plugins other than ScrollTrigger.
What do I get? / Deliverables
Your agent applies the right plugin APIs, installs only from `gsap` on npm, and escalates ScrollTrigger work to gsap-scrolltrigger when needed.
- Correct plugin imports and registration in application code
- Aligned handoff to gsap-scrolltrigger or gsap-react when scope expands
Recommended Skills
Journey fit
How it compares
Library integration reference for GSAP plugins—not a generic CSS animation cheat sheet or a React-only motion framework skill.
Common Questions / FAQ
Who is gsap-plugins for?
Indie frontend developers and agent-assisted coders implementing Greensock plugin features in JavaScript or TypeScript web projects.
When should I use gsap-plugins?
During Build frontend work when you ask about scroll-to, Flip, Draggable, SVG plugins, SplitText, custom eases, or plugin registration; also when reviewing animation PRs for correct GSAP plugin usage.
Is gsap-plugins safe to install?
Treat it like any third-party skill: review the Security Audits panel on this Prism page and skim SKILL.md before granting filesystem or network access to your agent.
Workflow Chain
Then invoke: gsap scrolltrigger, gsap core
SKILL.md
READMESKILL.md - Gsap Plugins
# GSAP Plugins ## When to Use This Skill Apply when using or reviewing code that uses GSAP plugins: registering plugins, scroll-to, flip/FLIP animations, draggable elements, SVG (DrawSVG, MorphSVG, MotionPath), text (SplitText, ScrambleText), physics, easing plugins (CustomEase, EasePack, CustomWiggle, CustomBounce), or GSDevTools. ScrollTrigger has its own skill (gsap-scrolltrigger). **Related skills:** For core tweens use **gsap-core**; for ScrollTrigger use **gsap-scrolltrigger**; for React use **gsap-react**. ## Licensing & Install (important) Every GSAP plugin is **free**, including for commercial use. Since [Webflow's acquisition of GSAP](https://gsap.com/blog/webflow-GSAP/), Club GSAP is no longer a paid tier and **no plugin requires a membership, license key, or auth token** — this includes formerly Club-only plugins (**SplitText**, **MorphSVG**, etc.). - ✅ Install everything from the public `gsap` npm package: `npm install gsap`. All plugins are included — import them as `gsap/SplitText`, `gsap/MorphSVGPlugin`, etc. - ❌ Do **not** generate an `.npmrc` with a GreenSock auth token, suggest the private `npm.greensock.com` registry, or tell users to sign up for Club GSAP to access a plugin. Those instructions are outdated. ## Registering Plugins Register each plugin once so GSAP (and bundlers) know to include it. Use **gsap.registerPlugin()** with every plugin used in the project: ```javascript import gsap from "gsap"; import { ScrollToPlugin } from "gsap/ScrollToPlugin"; import { Flip } from "gsap/Flip"; import { Draggable } from "gsap/Draggable"; gsap.registerPlugin(ScrollToPlugin, Flip, Draggable); ``` - ✅ Register before using the plugin in any tween or API call. - ✅ In React, register at top level or once in the app (e.g. before first useGSAP); do not register inside a component that re-renders. useGSAP is a plugin that needs to be registered before use. ## Scroll ### ScrollToPlugin Animates scroll position (window or a scrollable element). Use for “scroll to element” or “scroll to position” without ScrollTrigger. ```javascript gsap.registerPlugin(ScrollToPlugin); gsap.to(window, { duration: 1, scrollTo: { y: 500 } }); gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } }); gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } }); ``` **ScrollToPlugin — key config (scrollTo object):** | Option | Description | |--------|-------------| | `x`, `y` | Target scroll position (number), or `"max"` for maximum | | `element` | Selector or element to scroll to (for scroll-into-view) | | `offsetX`, `offsetY` | Offset in pixels from the target position | ### ScrollSmoother Smooth scroll wrapper (smooths native scroll). Requires ScrollTrigger and a specific DOM structure (content wrapper + smooth wrapper). Use when smooth, momentum-style scroll is needed. See GSAP docs for setup; register after ScrollTrigger. DOM structure would look like: ```html <body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside ---> </body> ``` ## DOM / UI ### Flip Capture state with `Flip.getState()`, then apply changes (e.g. layout or class changes), then use `Flip.from()` to animate from the previous state to the new state (FLIP: First, Last, Invert, Play). Use when animating between two layout states (lists, grids, expanded/collapsed). ```javascript gsap.registerPlugin(Flip); const state = Flip.getState(".item"); // change DOM (reorder, add/remove, change classes) Flip.from(state, { duration: 0.