Skills

Gsap

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

Install

npx skills add AThevon/genjutsu --skill gsap -g -a claude-code -y
Repository
AThevon/genjutsu721
Category
Design
Updated
3d ago
License
See repository
Context cost
Mediumabout 1,518 tokens
Runs scripts
No, instructions only

What it does

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

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

CriteriaCSS TransitionsFramer MotionGSAP
Hover / simple toggleYesYesOverkill
Sequenced timelineNoLimitedYes
Scroll-drivenscroll-timelineLimitedScrollTrigger
Complex staggerNoBasicDistribution
Mobile perf (60fps)GoodAverageExcellent
Text splittingNoNoSplitText
SVG morph / drawNoNoMorphSVG
Bundle size concern0kb~30kb~25kb + plugins

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

Setup

// Always register plugins at the top level
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
Read the whole SKILL.md on GitHub

More in Design