GSAP Plugins — guide skill for animation & motion graphics

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

Official GSAP plugins guide, incl. SplitText chars/words/lines with masks and re-splitting once fonts load.

• Type: Guide · Animation & motion graphics
• Slug: gsap-plugins
• Status: live
• Publisher: GSAP (GreenSock) (vendor, verified)
• License: MIT
• Source: https://github.com/greensock/gsap-skills/tree/main/skills/gsap-plugins
• Works in: Claude Code, Codex, Cursor
• Requires: The gsap npm package (all plugins included)
• Cost: Free — GSAP is free under Webflow's Standard 'no charge' license
• Adoption: 67,700 installs, 17,221 GitHub stars (skills.sh, 2026-10-26)

What it does

GreenSock's official skill for GSAP plugins: registration, SplitText, ScrambleText, DrawSVG, MorphSVG and MotionPath, Flip, Draggable and Inertia, Observer, CustomEase and GSDevTools. For kinetic type it documents SplitText.create() with chars, words and lines, line/word/char masks, aria handling, and autoSplit with onSplit() so text re-splits after fonts finish loading, plus font-kerning: none to stop glyphs shifting when split into characters. It states that every plugin, including the formerly Club-only SplitText, is free in the public gsap package with no auth token or private registry. ScrollTrigger, core tweens and React each have their own GSAP skills.

Use when

• Split text into characters, words or lines for staggered reveals (SplitText)
• Scramble or decode text effects (ScrambleText)
• SVG draw-on, morphing or motion paths
• Register and use any GSAP plugin correctly

Not for

• Scroll-linked animation (use gsap-scrolltrigger)
• Core tweens and timelines (use gsap-core and gsap-timeline)
• Splitting SVG <text>: SplitText does not support it

Install

• Claude Code: npx skills add greensock/gsap-skills --skill gsap-plugins -a claude-code
• Codex: npx skills add greensock/gsap-skills --skill gsap-plugins -a codex
• Cursor: npx skills add greensock/gsap-skills --skill gsap-plugins -a cursor

Example output

https://skills.varg.ai/previews/gsap-plugins.mp4 — Intro of the official SplitText Walkthrough embedded in the SplitText docs: text split into characters, words and lines and animated, then more SplitText effects (14-26 s) (credit: GSAP (GSAP Learning), https://gsap.com/docs/v3/Plugins/SplitText/)

More animation & motion graphics skills

• Day in My Life: A 60–75 s hand-drawn ink film of your agent's day with you, built from local Claude Code history, scored for strings.
• p5 Paint Animation: Handwriting that writes itself, photos that paint themselves and clips repainted as living paintings, in p5.js code.
• Session Story: A 40–70 s watercolor film of a typical session with your agent, told in your real messages, with its own score.
• Remotion Markup: Write Remotion markup that animates well: timing, transitions, motion blur, effects, audio, fonts and 3D.
• Motion AI Kit: Write production-grade UI animation with Motion or CSS: best practices, docs search, springs, perf audits.
• Motion Design: Animate with intent: timing, easing, choreography and Disney principles for UI and motion graphics.