# Gsap

GSAP animation engine sub-skill - core, timeline, ScrollTrigger, plugins.

- Repository: https://github.com/AThevon/genjutsu (721 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add AThevon/genjutsu --skill gsap -g -a claude-code -y`
Codex: `npx skills add AThevon/genjutsu --skill gsap -g -a codex -y`
Cursor: `npx skills add AThevon/genjutsu --skill gsap -g -a cursor -y`
Gemini CLI: `npx skills add AThevon/genjutsu --skill gsap -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add AThevon/genjutsu`

## Description

GSAP animation engine sub-skill - core, timeline, ScrollTrigger, plugins.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

> **Version-sensitive.** Every API name, SDK gate and browser-support claim below was
> verified on **2026-09-08** against primary sources. What against, and when, is in
> `_jutsu/VERSIONS.md`. If that date is old, re-verify before acting on a version number.

# GSAP - Animation Engine

> GSAP 3.15 (released 13 Apr 2026). Since 3.13 the entire library - including every former Club plugin (SplitText, MorphSVG, DrawSVG, ScrollSmoother, InertiaPlugin, MotionPathHelper, CustomEase…) - ships in the public `gsap` npm package and is free, commercial use included, under the GreenSock Standard "no charge" license. There is no Club paywall.
> GreenSock also publish official agent skills (MIT, 8 skills: core, timeline, scrolltrigger, plugins, utils, react, performance, frameworks): https://github.com/greensock/gsap-skills - worth installing alongside this sub-skill.

## When to use GSAP

| Criteria              | CSS Transitions | Framer Motion | GSAP              |
| --------------------- | --------------- | ------------- | ----------------- |
| Hover / simple toggle | Yes             | Yes           | Overkill          |
| Sequenced timeline    | No              | Limited       | **Yes**           |
| Scroll-driven         | scroll-timeline | Limited       | **ScrollTrigger** |
| Complex stagger       | No              | Basic         | **Distribution**  |
| Mobile perf (60fps)   | Good            | Average       | **Excellent**     |
| Text splitting        | No              | No            | **SplitText**     |
| SVG morph / draw      | No              | No            | **MorphSVG**      |
| Bundle size concern   | 0kb             | ~30kb         | ~25kb + plugins   |

**Rule**: if the animation needs timeline, scroll-link, or distributed stagger, use GSAP. Otherwise CSS first.

## Setup

```js
// Always register plugins at the top level
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";

The rest: https://github.com/AThevon/genjutsu/blob/HEAD/skills/_jutsu/gsap/SKILL.md