83.3K+Download
Skip to the usage guide
gsap-pluginsby GreenSock

GSAP Plugins Skill.

A Claude Code and Codex skill for motion and video: gSAP plugins: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG and physics.

  • Motion & Video
  • UI code
Download OpenDesignView usage guide
greensock/gsap-skills · skills/gsap-plugins/SKILL.mdSKILL.md
--- name: gsap-plugins description: Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration. --- ## When to Use This Skill ## Licensing & Install (important) ## Registering Plugins ## Scroll ## DOM / UI ## Text
Front matter and section headings read from the upstream file on 2026-09-14 · 21,477 characters in full

01 What it does

What the gsap-plugins Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Official GSAP skill covering plugin registration and every plugin outside ScrollTrigger: ScrollTo, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, PixiPlugin and GSDevTools.

It opens on licensing — every plugin is free, no Club GSAP membership or auth token — then gives per-plugin config: Flip.from vars, Draggable options, SplitText.create vars, morphSVG options, motionPath alignment. Aimed at designers and developers who install everything from the public gsap npm package and need correct call order, defaults and caveats. Related skills: gsap-core, gsap-scrolltrigger, gsap-react.

What it produces

  • A scroll tween that animates the window or any scrollable element to a position or target.
  • A SplitText instance exposing chars, words, lines and, when mask is set, masks.
  • A converted path element swapped into the DOM in place of a circle, rect, ellipse or line.
See the example prompt ↗

How It Works

  1. 01
    Register Plugins Once, up Front

    Each plugin is registered a single time so GSAP and bundlers know to include it, before it is used in any tween or API call.

  2. 02
    Capture, Change, Then Animate with Flip

    Flip is a three-beat sequence: read the old state, mutate the DOM, then animate from the recorded state to the new one.

  3. 03
    Create Drag and Throw Interactions

    Draggable.create takes a type, optional bounds and inertia; InertiaPlugin supplies the momentum after release.

  4. 04
    Split Text into Animatable Units

    SplitText puts characters, words and/or lines each in their own element so they can be staggered or animated per unit.

  5. 05
    Draw or Morph SVG

    The SVG plugins animate stroke dash values for drawing effects, or the path d attribute to morph one shape into another.

  6. 06
    Reach for Easing and Physics Plugins

    Easing plugins add custom curves or named eases; the physics plugins drive motion from velocity, angle and gravity values.

02 Find your fit

When to Use the gsap-plugins Skill

Use the gsap-plugins skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Scrolling to an element or a pixel position when ScrollTrigger is not involved.
  • Animating between two layout states such as reordered lists, grids, or expanded and collapsed panels.
  • Sliders, cards and reorderable lists that need drag, spin or throw behaviour on mouse and touch.
  • Text reveals animated per character, per word, or per line.
  • Icon-to-icon morphs, shape transitions and other path-based SVG animation.

Know the Boundaries

  • SplitText cannot split SVG text elements.
  • DrawSVG only animates stroke, never fill, and cannot visually change the contents of a use element.
  • ScrollTrigger work belongs in a separate skill rather than this one.
  • Text that uses text-wrap: balance sits badly with splitting.

What to Provide

  • The plugin list to registerEvery plugin used in the project must be named in one gsap.registerPlugin call so bundlers include it.
  • The ScrollSmoother DOM structureScrollSmoother needs ScrollTrigger plus a content wrapper inside a smooth wrapper, with fixed-position elements allowed outside.
  • A target for SplitTextSplitText.create takes a selector, element or array as its target alongside the split vars.
  • A shape for MorphSVGThe required shape property accepts a selector, an element, or a raw path string as the morph destination.
  • Fonts and layout already loadedFor custom fonts, split after they load or rely on autoSplit with onSplit so re-splits happen at the right moment.

03 Inside the skill

Rules the gsap-plugins Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Register Before You Animate

    A plugin must be registered before it is used in any tween or API call — registration is the first step, not a fix for a failure.

  2. Install from the Public Gsap Package

    Everything ships in npm install gsap and is imported as gsap/SplitText, gsap/MorphSVGPlugin and so on.

  3. Never Generate an auth-token .npmrc

    Do not create an .npmrc with a GreenSock auth token, do not point at the private npm.greensock.com registry, and do not tell users to join Club GSAP for a plugin.

  4. Register at the Top Level in React

    Register once in the app, for example before the first useGSAP call — never inside a component that re-renders, and useGSAP itself must be registered before use.

  5. Split Only What You Animate

    Split what is needed for performance, for example words and chars when lines are not used; chars-only splitting needs smartWrap to avoid odd line breaks.

  6. Build autoSplit Animations Inside onSplit

    When autoSplit is true, animations must be created inside onSplit so they target the newly split elements, and returned from onSplit so SplitText can revert and time-sync them.

  7. Give DrawSVG Something to Draw

    The element needs a visible stroke set via stroke and stroke-width in CSS or as SVG attributes, otherwise nothing is drawn.

  8. Keep dev-only Plugins Out of Production

    GSDevTools is for debugging during development and must not be shipped, and other development-only plugins follow the same rule.

04 Put it to work

Install gsap-plugins in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add gsap-plugins to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-plugins

Generic skills CLI form for skills/gsap-plugins/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
I'm building a filterable gallery in [framework]. Capture the state with Flip.getState() before the filter changes the DOM, then animate with Flip.from() using duration 0.5 and ease power2.inOut. Also make each card draggable inside [container selector] with inertia true so it throws when released, and register every plugin I use up front. Split the card captions into words and chars so I can stagger them.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Revert plugin instances such as SplitTextInstance.revert() when components unmount or elements are removed.
  • Run shapeIndex: "log" once to read the auto-calculated value, then paste that number or array into the tween.
  • Measure the stroke with DrawSVGPlugin.getLength(element) and DrawSVGPlugin.getPosition(element).
  • Tune MotionPath visually in MotionPathHelper, then read helper.path or helper.getProgress() in the animation.
  • Scrub and toggle animations with GSDevTools while developing.

In OpenDesign gsap-plugins is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Branch main
Skill file
skills/gsap-plugins/SKILL.md Content checksum recorded at verification; commit aed9cfd
License
MIT From LICENSE; SKILL.md says “MIT”.
Repository stars
15,248 GitHub snapshot taken 2026-09-14 for the whole greensock/gsap-skills repository, which contains 8 skills in this catalog. Not a rating or usage count for gsap-plugins.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. When to Use This SkillLists plugin scenarios and points to related gsap-core, gsap-scrolltrigger and gsap-react skills.
  2. Licensing & Install (important)States every plugin is free and forbids .npmrc auth tokens or Club GSAP sign-up advice.
  3. Registering PluginsRegister plugins once with gsap.registerPlugin before any tween, including in React.
  4. ScrollScrollToPlugin config table and the ScrollSmoother wrapper DOM structure.
  5. DOM / UIFlip state capture and from vars, Draggable options, Inertia tracking, Observer gestures.
  6. TextSplitText.create vars table with tips and caveats, plus ScrambleText glitch
The Skill's Own Description
“Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.”

Front-matter description from SKILL.md. The full file is about 21,477 characters. Read the full file on GitHub.

GSAP Plugins

Run gsap-plugins on a Real Motion and Video Task.

The gsap-plugins skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-plugins