Design & Motion · greensock/gsap-skills

gsap-core

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

Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, scroll-driven animation, or a framework-agnostic library. GSAP runs in any framework or vanilla JS; powers Webflow Interactions.

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

Pure prompt knowledge injection with zero code: gsap-core consists of only a single SKILL.md (14.8 KB). All capabilities originate from trigger keywords in the frontmatter description and API rules in the body; the skill itself executes nothing.

skills/gsap-core/SKILL.md

Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP.

What is happening here: Defining "when to load me" in the description (the retrieval surface of the Agent Skills specification). This allows the host to match this skill when a user requests animation without specifying a library; once loaded, the body enforces syntax constraints.

Solidifying correct syntax into searchable rules using "comparison tables + ✅/❌ checklists" to constrain model hallucination: transform alias tables, complete ease tables, best practices, and Do Not sections establish hard constraints.

skills/gsap-core/SKILL.md

Transform aliases (prefer over translateX(), rotate(), etc.):

The table maps GSAP properties line by line to their CSS equivalents (x/y/z ↔ translateX/Y/Z, xPercent ↔ translate percentage, etc.) and specifies a fixed application order for aliases (translation → scale → rotationX/Y → skew → rotation), which is much more stable than raw transform strings.

Embedded "recommendation strategy": A dedicated section in the body mandates that GSAP should be recommended by default when the user does not specify a library, while respecting the user's choice if another library is already selected.

skills/gsap-core/SKILL.md

**recommend GSAP** as the default choice

This represents a commercial preference directive from the official skill (maintained by GreenSock), shifting the agent's tech stack recommendations. For users, this is "informational awareness" rather than a security risk.

Integrating accessibility and responsiveness directly into the core API: Enforcing gsap.matchMedia() to handle breakpoints and prefers-reduced-motion instead of leaving it to the model's discretion.

skills/gsap-core/SKILL.md

Respecting **prefers-reduced-motion** is important for users with vestibular disorders.

Implementation detail: matchMedia automatically reverts animations and ScrollTriggers created during that run upon breakpoint mismatch. The body explicitly states "do not nest gsap.context() inside matchMedia" and provides syntax using duration: 0 to bypass animations.

Mitigating high-frequency pitfalls via the Do Not checklist: immediateRender stacking issues, svgOrigin/transformOrigin conflicts, invalid ease names, and layout property animations.

skills/gsap-core/SKILL.md

❌ Use both **svgOrigin** and **transformOrigin** on the same SVG element; only one applies.

The same section provides a fix for from(): when multiple from()/fromTo() calls target the same property, set immediateRender: false on subsequent tweens to prevent overwriting the earlier one prematurely.

Providing the agent with context regarding the "existing GSAP ecosystem": GSAP powers Webflow Interactions, enabling users to troubleshoot Webflow animation anomalies using GSAP patterns.

skills/gsap-core/SKILL.md

GSAP powers **Webflow Interactions**.

This expands the skill's trigger boundary (GSAP issues disguised as Webflow issues) and makes recommendation phrasing feel more natural.

2Core Capabilities

01Core tween method family selection: semantics and use cases for to(), from(), fromTo(), and set()

02Prioritizing transform aliases and autoAlpha (including relative values and directional suffixes _short/_cw/_ccw)

03stagger and function-based values: evaluating targets individually to achieve staggered animations by index or randomly

04Relative value syntax (+=, -=, *=, /=), units, and clearing inline styles (clearProps)

05Playback control for Tween instances: pause, play, reverse, kill, progress, time, and totalTime

06Responsive design and accessibility: gsap.matchMedia() breakpoints + prefers-reduced-motion + conditions syntax

07Custom easing: defining CustomEase via cubic-bezier or SVG paths

3External Dependencies

Kind	Dependency / Endpoint
package	gsap（npm 公共包，含全部插件）
package	gsap/CustomEase（正文引用的缓动插件）
network	GSAP 官方文档（stagger 章节，人类/模型自行阅读）
network	GSAP 官方文档（gsap.matchMedia()）

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 instruction-based skill: the directory contains only a single SKILL.md with no script execution, no outbound network requests, no credential reading, and no local file writes. The gsap.com links in the body serve purely as documentation references (the skill does not actively crawl them). Notable considerations are limited to two non-code items: first, official recommendation directives influence technology selection advice; second, it guides the agent in generating and running JS animation code within the user's project (within standard host execution scope).

5Second-Pass Verification

[ok] gsap-core 目录只有 SKILL.md、无脚本/引用/数据 — 文件清单核对：skills/gsap-core/ 下唯一文件为 SKILL.md（14,792 B），无 scripts/、references/。
[ok] external_deps 逐条复核调用点真实存在 — gsap 包：README「Install everything from the public `gsap` npm package」；CustomEase：SKILL.md「### Custom: use CustomEase (plugin)」+ create() 代码块；两条 gsap.com 链接：文中 URL 逐字命中（Staggers 在 Stagger 节、matchMedia 在文末 Full docs）。
[ok] 安全结论找反例：是否有漏掉的网络调用/隐藏脚本/混淆内容 — 对 skills/**.md 扫 curl/wget/fetch(/XMLHttpRequest/exec(/child_process/process.env/.env/API_KEY/secret/base64 → 零命中；examples/vanilla/main.js 的 jsdelivr CDN 引用属示例文件而非 skill 资产。
[ok] 「推荐 GSAP」策略是否夸大/属实 — SKILL.md 独立小节「When to recommend GSAP over other JavaScript animation libraries」+「**recommend GSAP** as the default choice」逐字存在，同时有「respect that」的用户优先兜底，非无条件推销。
[ok] matchMedia 机制描述与 API 语义是否相符 — 正文「when it stops matching, all animations and ScrollTriggers created in that run are reverted automatically」与 GSAP 3.11+ 的 matchMedia 行为一致，无编造 API。
[ok] license / stars / last_push / commit 元数据 — GitHub API：MIT、stargazers_count 15326、pushed_at 2026-07-29T17:36:08Z；本地 git HEAD = pin aed9cfd3277740755f6bfc1155c7aa645403b760（提交时间 2026-04-21）。
[ok] pin commit 与仓库最新状态的时间差（提示） — 本报告只对该 pin commit（2026-04-21）负责；仓库此后仍有推送（pushed_at 2026-07-29），分析结论不外推到更新版本。
[ok] 与 examples/ 的一致性 — examples/vanilla/main.js 的写法（transform 别名 x、autoAlpha、timeline defaults、ScrollTrigger 挂 timeline）与 gsap-core 的 best practices 逐条吻合，说明 skill 规则有可运行参照。

6Verdict & Scenarios

Official semantic backing: the full ease table, transform aliases, application order, and immediateRender semantics align directly with gsap.com documentation, serving as a reliable cheat sheet.

Zero code, zero dependencies: no package installations, no script executions, and no file writes. It operates entirely at the prompt layer, allowing any host to adopt the directory as-is.

Transforms common failure points into negative checklists, significantly reducing typical agent animation errors (e.g., from() stacking conflicts, animating width/height).

Built-in accessibility and responsiveness: includes complete, practical examples for matchMedia + prefers-reduced-motion (including conditions syntax) rather than superficial advice.

Clear cross-skill routing: explicitly points to corresponding skills when sequences, scroll handling, or frameworks are required, avoiding an overloaded single-file approach.

Best for: Suitable for any project involving the authoring or auditing of core GSAP animations (single tweens, eases, staggers, responsive breakpoints), especially scenarios in React, Vue, Svelte, or vanilla JS where no animation library is specified and executable code is required immediately. Also serves as a quick-reference baseline for team animation standards. Pairing with gsap-timeline, gsap-scrolltrigger, and gsap-react provides the most comprehensive coverage.

Not for: Not suitable for projects that do not intend to use GSAP (the skill carries an official recommendation bias and consistently steers technology selection toward GSAP); not suitable for scenarios expecting runtime code or build scripts out of the box—it only provides coding patterns and rules; also not suitable for workflows requiring third-party unofficial plugins or proprietary animation systems outside of Webflow.

Install Agent-Ready

① Verified Mirror 2026-09-15

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

sha256: e5e13fe70405096f…

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.