SkillAgentSearch skills...

gsap-plugins

Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools

GenerateConvertImprove

Install / Use

npx skills add nexu-io/open-design --skill gsap-plugins

Installs into whichever agent you are using.

About this skill
📄

SKILL.md

Installable skill definition

Quality Score

90/100

Category

Design

Supported Platforms

Universal

Tags

skill

Our assessment of gsap-plugins

gsap-plugins scores 90/100 on our quality scale, 55th of 133 Design skills we index (top 42%).

Its SKILL.md is 21 KB long, well organised into 36 sections with 21 code examples: a thorough specification that gives an agent plenty to work with.

With 97,896 GitHub stars, it is one of the more widely adopted skills in the catalogue.

Substance
30/30
Structure
20/20
Description
15/15
Adoption
20/20
Freshness
15/15

Maintenance, license and trust

  • The repository was last updated today, so gsap-plugins is actively maintained.
  • It is released under the Apache-2.0 license, a permissive license that allows use, modification and commercial use with attribution.
  • Its trust signals score 100/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.

gsap-plugins compared with similar skills

All 4 of these similar skills score higher than gsap-plugins; compare them before choosing.

SkillScoreStarsUpdatedFormat
gsap-plugins (this skill)by nexu-io9097.9ktodaySKILL.md
algorithmic-artby anthropics100177.9k2d agoSKILL.md
pptxby anthropics100177.9k2d agoSKILL.md
designby nextlevelbuilder100130.2k3d agoSKILL.md
ui-ux-pro-maxby nextlevelbuilder100130.2k3d agoSKILL.md

Frequently asked questions

How do I install gsap-plugins?
Run npx skills add nexu-io/open-design --skill gsap-plugins. The install tabs above show the steps for each supported agent.
Which AI agents does gsap-plugins work with?
It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
Is gsap-plugins safe to use?
It is Apache-2.0-licensed and scores 100/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
Is gsap-plugins still maintained?
The repository was last updated today, so gsap-plugins is actively maintained.

Skill content

View source on GitHub

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. triggers:

  • "gsap plugins"
  • "gsap plugin registration"
  • "flip animation"
  • "draggable"
  • "morphsvg"
  • "splittext" license: MIT od: mode: prototype category: animation-motion upstream: "https://github.com/greensock/gsap-skills"

GSAP Plugins

Curated from GreenSock's official GSAP skills: https://github.com/greensock/gsap-skills

When to Use This Skill

Apply when using or reviewing code that uses GSAP plugins: registering plugins, scroll-to, flip/FLIP animations, draggable elements, SVG (DrawSVG, MorphSVG, MotionPath), text (SplitText, ScrambleText), physics, easing plugins (CustomEase, EasePack, CustomWiggle, CustomBounce), or GSDevTools. ScrollTrigger has its own skill (gsap-scrolltrigger).

Related skills: For core tweens use gsap-core; for ScrollTrigger use gsap-scrolltrigger; for React use gsap-react.

Licensing & Install (important)

Every GSAP plugin is free, including for commercial use. Since Webflow's acquisition of GSAP, Club GSAP is no longer a paid tier and no plugin requires a membership, license key, or auth token — this includes formerly Club-only plugins (SplitText, MorphSVG, etc.).

  • ✅ Install everything from the public gsap npm package: npm install gsap. All plugins are included — import them as gsap/SplitText, gsap/MorphSVGPlugin, etc.
  • ❌ Do not generate an .npmrc with a GreenSock auth token, suggest the private npm.greensock.com registry, or tell users to sign up for Club GSAP to access a plugin. Those instructions are outdated.

Registering Plugins

Register each plugin once so GSAP (and bundlers) know to include it. Use gsap.registerPlugin() with every plugin used in the project:

import gsap from "gsap";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import { Flip } from "gsap/Flip";
import { Draggable } from "gsap/Draggable";

gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);
  • ✅ Register before using the plugin in any tween or API call.
  • ✅ In React, register at top level or once in the app (e.g. before first useGSAP); do not register inside a component that re-renders. useGSAP is a plugin that needs to be registered before use.

Scroll

ScrollToPlugin

Animates scroll position (window or a scrollable element). Use for “scroll to element” or “scroll to position” without ScrollTrigger.

gsap.registerPlugin(ScrollToPlugin);

gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });

ScrollToPlugin — key config (scrollTo object):

| Option | Description | |--------|-------------| | x, y | Target scroll position (number), or "max" for maximum | | element | Selector or element to scroll to (for scroll-into-view) | | offsetX, offsetY | Offset in pixels from the target position |

ScrollSmoother

Smooth scroll wrapper (smooths native scroll). Requires ScrollTrigger and a specific DOM structure (content wrapper + smooth wrapper). Use when smooth, momentum-style scroll is needed. See GSAP docs for setup; register after ScrollTrigger. DOM structure would look like:

<body>
	<div id="smooth-wrapper">
		<div id="smooth-content">
			<!--- ALL YOUR CONTENT HERE --->
		</div>
	</div>
	<!-- position: fixed elements can go outside --->
</body>

DOM / UI

Flip

Capture state with Flip.getState(), then apply changes (e.g. layout or class changes), then use Flip.from() to animate from the previous state to the new state (FLIP: First, Last, Invert, Play). Use when animating between two layout states (lists, grids, expanded/collapsed).

gsap.registerPlugin(Flip);

const state = Flip.getState(".item");
// change DOM (reorder, add/remove, change classes)
Flip.from(state, { duration: 0.5, ease: "power2.inOut" });

Flip — key config (Flip.from vars):

| Option | Description | |--------|-------------| | absolute | Use position: absolute during the flip (default: false) | | nested | When true, only the first level of children is measured (better for nested transforms) | | scale | When true, scale elements to fit (avoids stretch); default true | | simple | When true, only position/scale are animated (faster, less accurate) | | duration, ease | Standard tween options |

More information

https://gsap.com/docs/v3/Plugins/Flip

Draggable

Makes elements draggable, spinnable, or throwable with mouse/touch. Use for sliders, cards, reorderable lists, or any drag interaction.

gsap.registerPlugin(Draggable, InertiaPlugin);

Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
Draggable.create(".knob", { type: "rotation" });

Draggable — key config options:

| Option | Description | |--------|-------------| | type | "x", "y", "x,y", "rotation", "scroll" | | bounds | Element, selector, or { minX, maxX, minY, maxY } to constrain drag | | inertia | true to enable throw/momentum (requires InertiaPlugin) | | edgeResistance | 0–1; resistance when dragging past bounds | | cursor | CSS cursor during drag | | onDragStart, onDrag, onDragEnd | Callbacks; receive event and target | | onThrowUpdate, onThrowComplete | Callbacks when inertia is active |

Inertia (InertiaPlugin)

Works with Draggable for momentum after release, or track the inertia/velocity of any property of any object so that it can then seamlessly glide to a stop using a simple tween. Register with Draggable when using inertia: true:

gsap.registerPlugin(Draggable, InertiaPlugin);
Draggable.create(".box", { type: "x,y", inertia: true });

Or track velocity of a property:

InertiaPlugin.track(".box", "x");

Then use "auto" to continue the current velocity and glide to a stop:

gsap.to(obj, { inertia: { x: "auto" } });

Observer

Normalizes pointer and scroll input across devices. Use for swipe, scroll direction, or custom gesture logic without tying directly to scroll position like ScrollTrigger.

gsap.registerPlugin(Observer);

Observer.create({
  target: "#area",
  onUp: () => {},
  onDown: () => {},
  onLeft: () => {},
  onRight: () => {},
  tolerance: 10
});

Observer — key config options:

| Option | Description | |--------|-------------| | target | Element or selector to observe | | onUp, onDown, onLeft, onRight | Callbacks when swipe/scroll passes tolerance in that direction | | tolerance | Pixels before direction is detected; default 10 | | type | "touch", "pointer", or "wheel" (default: "touch,pointer") |

Text

SplitText

Splits an element’s text into characters, words, and/or lines (each in its own element) for staggered or per-unit animation. Use when animating text character-by-character, word-by-word, or line-by-line. Returns an instance with chars, words, lines (and masks when mask is set). Restore original markup with revert() or let gsap.context() revert. Integrates with gsap.context(), matchMedia(), and useGSAP(). API: SplitText.create(target, vars) (target = selector, element, or array).

gsap.registerPlugin(SplitText);

const split = SplitText.create(".heading", { type: "words, chars" });
gsap.from(split.chars, { opacity: 0, y: 20, stagger: 0.03, duration: 0.4 });
// later: split.revert() or let gsap.context() cleanup revert

With onSplit() (v3.13.0+), animations run on each split and on re-split when autoSplit is used; returning a tween/timeline from onSplit() lets SplitText clean up and sync progress on re-split:

SplitText.create(".split", {
  type: "lines",
  autoSplit: true,
  onSplit(self) {
    return gsap.from(self.lines, { y: 100, opacity: 0, stagger: 0.05, duration: 0.5 });
  }
});

SplitText — key config (SplitText.create vars):

| Option | Description | |--------|-------------| | type | Comma-separated: "chars", "words", "lines". Default "chars,words,lines". Only split what is needed (e.g. "words, chars" if not using lines) for performance. Avoid chars-only without words/lines or use smartWrap: true to prevent odd line breaks. | | charsClass, wordsClass, linesClass | CSS class on each split element. Append "++" to add an incremented class (e.g. linesClass: "line++" → line1, line2, …). | | aria | "auto" (default), "hidden", or "none". Accessibility: "auto" adds aria-label on the split element and aria-hidden on line/word/char elements so screen readers read the label; "hidden" hides all from readers; "none" leaves aria unchanged. Use "none" plus a screen-reader-only duplicate if nested links/semantics must be exposed. | | autoSplit | When true, reverts and re-splits when fonts finish loading or when the element width changes (and lines are split), avoiding wrong line breaks. Animations must be created inside onSplit() so they target the newly split elements; return the animation from onSplit() for automatic cleanup and time-sync on re-split. | | onSplit(self) | Callback when split completes (and on each re-split if autoSplit is true). Receives the SplitText instance. Returning a GSAP tween or timeline enables automatic revert/sync of that animation when re-splitting. | | mask | "lines", "words", or "chars". Wraps each unit in an extra element with overflow: clip for mask/reveal effects. Only one type; access wrappers on the instance’s masks array (or use class -mask if a class is set). | | tag | Wrapper element tag; default "div". Use "span" for inline (note: transforms like rotation/scale may not render on inline elements in some browsers). | | deepSlice | When true (default), nested elements (e.g. <strong>) that span multiple lines are subdivided so lines don’t stretch vertically. Only applies when splitting lines. | | ignore | Selector or element(s) to leave unsplit (e.g. ignore: "sup"). | | smartWrap | When splitting chars only, wraps words in a white-space: nowrap span to avoid mid-word line breaks. Ignored if words or lines are split. Default false. | | wordDelimiter | Word boundary: string (default " "), RegExp, or { delimiter: RegExp, replaceWith: string } for custom splitting (e.g. zero-width joiner for hashtags, or non-Latin). | | prepareText(text, parent) | Function that receives raw text and parent element; return modified text before splitting (e.g. to insert break markers for languages without spaces). | | propIndex | When true, adds a CSS variable with index on each split element (e.g. --word: 1, --char: 2). | | reduceWhiteSpace | Collapse consecutive spaces; default true. From v3.13.0 also honors line breaks and can insert <br> for <pre>. | | onRevert | Callback when the instance is reverted. |

Tips: Split only what is animated (e.g. skip chars if only animating words). For custom fonts, split after they load (e.g. document.fonts.ready.then(...)) or use autoSplit: true with onSplit(). To avoid kerning shift when splitting chars, use CSS font-kerning: none; text-rendering: optimizeSpeed;. Avoid text-wrap: balance; it can interfere with splitting. SplitText does not support SVG <text>.

Learn more: SplitText

ScrambleText

Animates text with a scrambl

Truncated for display — read the full file on GitHub.

Related Skills

algorithmic-art

177.9k

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.

pptx

177.9k

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an em…

design

130.2k

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG…

ui-ux-pro-max

130.2k

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation.

nexu-io

View profile

View on GitHub
GitHub Stars97.9k
CategoryDesign
Updated15h ago
Forks11.4k
nexu-io/gsap-plugins

Languages

TypeScript

Trust signals

100/100

From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.

No cautions