Design & Motion · greensock/gsap-skills

gsap-plugins

Name: gsap-plugins
Author: greensock/gsap-skills

Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Author greensockGitHub greensock/gsap-skills ↗Stars 15326License MIT（仓库根 LICENSE，Copyright (c) 2026 GreenSock；GitHub API spdx_id=MIT；每个 SKILL.md frontmatter 亦写 license: MIT）Commit aed9cfd327

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

Resolve the 'license myth' before discussing APIs: An opening section specifically corrects outdated information claiming 'Club GSAP is paid/requires an auth token/private registry', providing the only correct installation path.

skills/gsap-plugins/SKILL.md

Every GSAP plugin is **free**, including for commercial use.

Why it delivers claimed functionality: Models commonly retain outdated facts like 'SplitText/MorphSVG are paid Club plugins requiring a .npmrc token'. Without explicit correction, agents will generate incorrect installation steps prompting users to purchase memberships; this instruction functions as a 'fact-correcting' patch.

Unified registration paradigm: All plugins must be registered via gsap.registerPlugin() before use, and the registration point is fixed at the application level (never inside re-rendering components).

skills/gsap-plugins/SKILL.md

Register each plugin once so GSAP (and bundlers) know to include it.

What is happening here: Registration simultaneously serves the purpose of instructing bundlers not to tree-shake the plugins; the skill clarifies that useGSAP itself is also a plugin requiring registration, preventing React users from forgetting registration and causing the hook to fail.

Partitioned into functional domain guides: Scroll / DOM-UI / Text / SVG / Easing / Physics / Development / Other, with each plugin equipped with minimal viable snippets + key configuration tables.

skills/gsap-plugins/SKILL.md

gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);

Syntaxes for registering multiple plugins at once are also provided in examples, covering combined usage patterns for the ScrollToPlugin/Flip/Draggable trio.

Teaches SplitText usage down to the 'lifecycle binding' level: Driven by autoSplit + onSplit return values for automatic cleanup and progress synchronization, rather than just 'splitting text then staggering'.

skills/gsap-plugins/SKILL.md

Animations must be created inside onSplit()

Key point: autoSplit re-splits when fonts finish loading or widths change, and existing animations must be cleanable after re-splitting; therefore, animations must be built inside onSplit and return the tween to SplitText. Also includes accessibility and internationalization details like aria / mask / smartWrap / wordDelimiter.

Comprehensive MorphSVG coverage from basics to parameter tuning: shapeIndex alignment, map matching strategies, smooth/curveMode/precompile performance knobs, and rendering to canvas.

skills/gsap-plugins/SKILL.md

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line");

Practical trial-and-error-reducing techniques such as precompile:"log" / shapeIndex:"log" ('log first, fill in later') are documented.

Establish strict red lines for development-only plugins: Debugging tools like GSDevTools and markers must never reach production.

skills/gsap-plugins/SKILL.md

❌ Ship GSDevTools or development-only plugins to production.

Echoes the markers requirement of gsap-scrolltrigger, maintaining repo-wide consistent production discipline.

Explicitly declares implicit plugin interdependencies: Draggable inertia throws must have InertiaPlugin registered simultaneously.

skills/gsap-plugins/SKILL.md

gsap.registerPlugin(Draggable, InertiaPlugin);

Draggable's inertia: true depends on the presence of InertiaPlugin to function, otherwise failing silently; the skill makes this implicit dependency explicit through registration examples.

2Core Capabilities

01Plugin registration & bundling: When to use registerPlugin and batch-registering multiple plugins

02ScrollToPlugin: Scroll to positions/elements (x, y, element, offsetX/offsetY, including "max")

03ScrollSmoother: Smooth scrolling wrapper and required DOM structure

04Flip: FLIP animations via getState → mutate DOM → from() (absolute/nested/scale/simple)

05Draggable + Inertia: Dragging/rotating/tossing, including bounds/edgeResistance/onThrowUpdate

06Observer: Unified cross-device pointer/wheel gestures (onUp/onDown/onLeft/onRight/tolerance/type)

07Text & SVG: SplitText (chars/words/lines, autoSplit, mask, aria), ScrambleText, DrawSVG, MorphSVG, MotionPath(+Helper)

08Easing & Physics: CustomEase / EasePack / CustomWiggle / CustomBounce, Physics2D / PhysicsProps, PixiPlugin integration

3External Dependencies

Kind	Dependency / Endpoint
package	gsap（公共 npm 包，全部插件内含）
package	gsap 插件子路径（ScrollToPlugin/Flip/Draggable/InertiaPlugin/SplitText/MorphSVGPlugin/Physics2DPlugin/PixiPlugin…）
package	PixiJS（PixiPlugin 动画的宿主渲染库，第三方）
network	Webflow 收购 GSAP 公告（插件免费的依据）
network	GSAP 插件总文档 / Flip / DrawSVG / MorphSVG / SplitText 分页

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt instructions and rule text; no script execution or external impact

Audit Notes: Pure prompt-based instruction skill: Contains only SKILL.md (21,579 B) in the directory, with no scripts, outbound network calls, credential reading, or file writes; all external links point strictly to official gsap.com pages. Uniquely, it explicitly rejects credential-based practices—the text prohibits generating .npmrc files with GreenSock auth tokens or using private registries, cutting off common supply chain/credential leak risks at the source (contrasting outdated tutorials). Remaining considerations are solely self-reviewing generated code and requiring users to import third-party libraries like PixiJS independently.

5Second-Pass Verification

[ok] 目录资产面：仅 SKILL.md — skills/gsap-plugins/ 下唯一文件 SKILL.md（21,579 B）；无 scripts/、references/、二进制。
[ok] external_deps 逐条核实 — npm 安装行、插件子路径 import、PIXI.Sprite 代码、以及 6 条 gsap.com URL（blog/webflow-GSAP、Plugins 总页、Flip、DrawSVGPlugin、MorphSVGPlugin、SplitText）全部逐字命中文件。
[ok] 「无需 auth token / 私有 registry」是否为原文反例式约束 — 原文确为否定式告诫「❌ Do **not** generate an `.npmrc` with a GreenSock auth token, suggest the private `npm.greensock.com` registry…」——全仓 token 关键词命中处即此，非读取凭证。
[ok] SplitText 的 onSplit/autoSplit 描述与 API 语义一致性 — 原文说明 autoSplit 在字体加载完成/宽度变化时重拆、动画须建于 onSplit 内并 return 以获得清理与进度同步，与官方 v3.13+ 行为一致；同时给出 aria/mask/smartWrap 等真实参数。
[ok] MorphSVG 参数是否编造 — shapeIndex/map/smooth(v3.14+)/curveMode/origin/precision/precompile/render/updateTarget 与官方参数表一致；convertToPath/rawPathToString/stringToRawPath 静态方法真实存在。
[ok] 安全反例搜索 — token 扫描：除上述否定式 auth token 一处外，curl/wget/fetch(/XMLHttpRequest/exec(/child_process/process.env/.env/API_KEY/secret 全零命中；无混淆/编码载荷。
[ok] 与 gsap-scrolltrigger 的插件归属是否打架 — 本文首段声明「ScrollTrigger has its own skill (gsap-scrolltrigger)」，未重复其内容；ScrollSmoother 在此、ScrollTrigger 本体在彼，分工一致。
[ok] 元数据与 pin — frontmatter license MIT；HEAD = aed9cfd3277740755f6bfc1155c7aa645403b760；GitHub API stars 15326 / pushed_at 2026-07-29T17:36:08Z。

6Verdict & Scenarios

One-stop plugin selection reference: Covers seven major categories across Scroll/DOM/Text/SVG/Easing/Physics/Dev, complete with minimal viable snippets and key configuration tables.

Anti-hallucination correction: Explicitly repudiates outdated notions claiming plugins require payment/tokens/private registries, strictly prohibiting generation of .npmrc credential configs.

Extends down to real-world troubleshooting: SplitText autoSplit/onSplit lifecycles, MorphSVG shapeIndex:"log"/precompile:"log" debugging techniques, and visual parameter tuning with MotionPathHelper.

Production discipline: Development plugins (GSDevTools) and markers are prohibited in production, aligning with similar requirements in gsap-scrolltrigger.

Implicit dependencies made explicit: Documents that Draggable tossing requires InertiaPlugin and useGSAP requires registration as a plugin, eliminating silent failures.

Best for: Ideal for projects using GSAP for SVG morphing (MorphSVG/DrawSVG), text animations (SplitText/ScrambleText), dragging and inertia (Draggable+Inertia), layout transitions (Flip), smooth scrolling (ScrollSmoother), or scroll navigation (ScrollToPlugin); also serves as an anti-hallucination guide for agents to stop directing users to buy Club memberships.

Not for: Not suitable for projects requiring only basic tweens/timelines (gsap-core or gsap-timeline suffice, as this file is substantially large); not suitable for deep ScrollTrigger implementation details (use gsap-scrolltrigger); not suitable for using the skill text as legal commercial licensing advice—official pages remain the source of truth for license terms.

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload gsap-plugins.tar.gz

sha256: 188abaf4c67c55db…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit aed9cfd327.