GSAP Core Animation
greensock/gsap-skills
Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.
GSAP animation engine sub-skill - core, timeline, ScrollTrigger, plugins.
Install Gsap
$ npx skills add AThevon/genjutsu --skill gsap -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install AThevon/genjutsu gsap --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/AThevon/genjutsu.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/_jutsu/gsap .claude/skills/gsap && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "gsap" agent skill from https://github.com/AThevon/genjutsu/tree/main/skills/_jutsu/gsap into .claude/skills/gsap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsap", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/AThevon/genjutsu/tree/main/skills/_jutsu/gsapType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add AThevon/genjutsu --skill gsap -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install AThevon/genjutsu gsap --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AThevon/genjutsu.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/_jutsu/gsap .agents/skills/gsap && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "gsap" agent skill from https://github.com/AThevon/genjutsu/tree/main/skills/_jutsu/gsap into .agents/skills/gsap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsap", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AThevon/genjutsu --skill gsap -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install AThevon/genjutsu gsap --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AThevon/genjutsu.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/_jutsu/gsap .cursor/skills/gsap && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "gsap" agent skill from https://github.com/AThevon/genjutsu/tree/main/skills/_jutsu/gsap into .cursor/skills/gsap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsap", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/AThevon/genjutsu.git --path skills/_jutsu/gsap--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add AThevon/genjutsu --skill gsap -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install AThevon/genjutsu gsap --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AThevon/genjutsu.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/_jutsu/gsap .gemini/skills/gsap && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "gsap" agent skill from https://github.com/AThevon/genjutsu/tree/main/skills/_jutsu/gsap into .gemini/skills/gsap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsap", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install AThevon/genjutsu gsapInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add AThevon/genjutsu --skill gsap -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/AThevon/genjutsu.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/_jutsu/gsap .github/skills/gsap && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "gsap" agent skill from https://github.com/AThevon/genjutsu/tree/main/skills/_jutsu/gsap into .github/skills/gsap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsap", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AThevon/genjutsu --skill gsap -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install AThevon/genjutsu gsap --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AThevon/genjutsu.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/_jutsu/gsap .opencode/skills/gsap && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "gsap" agent skill from https://github.com/AThevon/genjutsu/tree/main/skills/_jutsu/gsap into .opencode/skills/gsap/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gsap", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
gsap- GitHub stars
- 431
- Used in
- 1 other repo
- Token cost
- ~1.6k tokens
- SKILL.md length
- 272 words
- Files
- 5 (incl. references)
- Skills in repo
- 20
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
GSAP animation engine sub-skill - core, timeline, ScrollTrigger, plugins.
- Works in 5 steps: Ease on containerAnimation → ScrollTrigger on a child tween in a… → setState in onUpdate → …
- Tasks that involve Web animation and motion
- SKILL.md covers When to use GSAP, Setup, Core Patterns and ScrollTrigger Patterns, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Gsap is an agent skill from AThevon/genjutsu. GSAP animation engine sub-skill - core, timeline, ScrollTrigger, plugins.
Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `references/core.md`, `references/plugins.md` and `references/scrolltrigger.md`).
It sits in Frontend & Design, covering Web animation and motion. It works with GSAP and React. The repository describes itself as: Creative coding skills for Claude Code, claude.ai and Cowork. Motion, micro-interactions and design systems across Web (GSAP, Motion, Three.js, CSS), Android (Jetpack Compose)…
When your agent uses it
- Tasks that involve Web animation and motion
Example prompts
- “/gsap”
Workflow steps
5 steps, taken from the step headings in SKILL.md.
- Ease on containerAnimation
- ScrollTrigger on a child tween in a timeline
- setState in onUpdate
- immediateRender on from() in a timeline
- Animating non-transform properties
What it can do on your machine
Read from SKILL.md and the folder at commit 1f518a7. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
github.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Gsap loads about 1.6k tokens when it runs, and up to ~9.2k if it reads all its reference files. Until then it costs about 20 tokens; SKILL.md has 272 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 272 words (~1,552 tokens).
“Rule: if the animation needs timeline, scroll-link, or distributed stagger, use GSAP. Otherwise CSS first.”
- name
- gsap
- metadata.internal
- true
Files
SKILL.md and 4 other files (references) in skills/_jutsu/gsap of AThevon/genjutsu.
- SKILL.md
- references/core.md
- references/plugins.md
- references/scrolltrigger.md
- references/timeline.md
Open the folder on GitHubat commit 1f518a7
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in AThevon/genjutsu, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Gsap next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Gsap this skillAThevon/genjutsu | 431 | 1 repos | ~1.6k | Automated safety check: Pass | Custom licence | |
| GSAP Core Animationgreensock/gsap-skills | 16k | 4 repos | ~3.7k | Automated safety check: Pass | MIT | |
| GSAP for Reactgreensock/gsap-skills | 16k | 4 repos | ~1.6k | Automated safety check: Pass | MIT | |
| Silk Designbendrape1-byte/silk-design | 138 | — | ~1.8k | Automated safety check: Pass | MIT | |
| GSAP Plugins Guidegreensock/gsap-skills | 16k | 4 repos | ~5.4k | Automated safety check: Warn | MIT | |
| Phantom Motionpixelxzen/phantom-motion | 185 | — | ~1k | Automated safety check: Pass | Apache-2.0 |
Similar skills
GSAP for React
greensock/gsap-skills
Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.
Silk Design
bendrape1-byte/silk-design
Build websites and web UI with smooth, polished, high-end motion by default — the buttery feel of premium sites, not static slop.
GSAP Plugins Guide
greensock/gsap-skills
Covers GSAP plugin use: registration, scroll, Flip, Draggable, SVG, text, physics and easing plugins, with the current free licensing and npm install guidance.
Phantom Motion
pixelxzen/phantom-motion
交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。
Anime.js Animation Guide
freshtechbro/claudedesignskills
Guides use of Anime.js for timeline sequences, stagger effects, SVG morphing and keyframe animation on DOM elements, CSS, SVG and JavaScript objects.
More from AThevon/genjutsu
All 20 skills in this repoOrchestration
AThevon/genjutsu
Running a team of subagents on one design build: clone briefs, disjoint file ownership, isolated builds, the evidence packet, review lenses, the fix plan, verdicts, cold eyes and the stop rule, with…
Design Audit
AThevon/genjutsu
Design audit checklist - motion gaps, accessibility, color consistency, responsive, performance.
UI UX Pro Max
AThevon/genjutsu
UI/UX design-system intelligence - 84 styles, 192 palettes, 74 font pairings, 25 charts, 99 UX guidelines across 22 stacks (searchable dataset + CLI).
Canvas Generative
AThevon/genjutsu
Algorithmic and generative art with Canvas 2D - particles, flow fields, noise, fractals, L-systems.
Compose Motion
AThevon/genjutsu
Jetpack Compose animation foundations - animateAsState, AnimatedVisibility, Crossfade, updateTransition, SharedTransitionLayout, gestures.
Compose Multiplatform
AThevon/genjutsu
Compose Multiplatform / KMP patterns - expect/actual composables, platform-specific code, density and font handling cross-target, iOS/Android/Desktop interop.
Related
Categories
Questions about Gsap
What does Gsap do?
GSAP animation engine sub-skill - core, timeline, ScrollTrigger, plugins. Gsap is an agent skill from AThevon/genjutsu. GSAP animation engine sub-skill - core, timeline, ScrollTrigger, plugins.
When should I use Gsap?
Gsap fits situations like: tasks that involve Web animation and motion.
How do I install Gsap in Claude Code?
Run `npx skills add AThevon/genjutsu --skill gsap -a claude-code`. Or copy the skill folder (skills/_jutsu/gsap in AThevon/genjutsu) into .claude/skills/gsap in your project. Claude Code loads it when a task matches its description.
How do I install Gsap in Codex?
Run `npx skills add AThevon/genjutsu --skill gsap -a codex`. Or copy the skill folder (skills/_jutsu/gsap in AThevon/genjutsu) into .agents/skills/gsap in your project. Codex loads it when a task matches its description.
Can I use Gsap in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AThevon/genjutsu --skill gsap -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gsap, .gemini/skills/gsap, .github/skills/gsap and .opencode/skills/gsap in your project.
What does Gsap need to run?
SKILL.md names no scripts, command-line tools or credentials: Gsap is instructions for the agent only.
Does Gsap access the network?
SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.
Is Gsap safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Gsap use?
Gsap has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Gsap use?
About 1.6k tokens (SKILL.md is roughly 6.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7.6k tokens, read only when the agent opens those files.
What are the alternatives to Gsap?
Skills that share tags, products or a category with Gsap: GSAP Core Animation (greensock/gsap-skills, 16k stars), GSAP for React (greensock/gsap-skills, 16k stars), Silk Design (bendrape1-byte/silk-design, 138 stars) and GSAP Plugins Guide (greensock/gsap-skills, 16k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Gsap?
AThevon (a GitHub user) maintains it in AThevon/genjutsu, which has 431 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on October 5, 2026.
Source: AThevon/genjutsu on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.