Auto-invokedSkill
od-contribute
One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD;…
@nexu-ioView Skill/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. Use when the user asks about a GSAP plugin,
Install
$ npx -y skills add nexu-io/open-design --skill gsap-plugins --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/gsap-plugins
Context preview
The summary Claude sees to decide when to auto-load this skill.
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,
SKILL.md
gsap-plugins.SKILL.mdname: 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](https://gsap.com/blog/webflow-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
Read more
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](https://gsap.com/blog/webflow-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
Ships withopen-design
🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.
Get the whole plugin, auto-invoked
Stats
95,466
Stars
11,063
Forks
Active
Maintenance
TypeScript
Language
Apache-2.0
License
4d ago
Last commit
4mo ago
Created
Repo: nexu-io/open-design
Other skills on open-design.
@nexu-ioView SkillAuto-invokedSkill
8-bit-orbit-video-temp…
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced…
@nexu-ioView SkillAuto-invokedSkill
ad-creative
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
@nexu-ioView SkillAuto-invokedSkill
after-hours-editorial-…
Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when…
@nexu-ioView SkillAuto-invokedSkill
agent-browser
Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking…
@nexu-ioView SkillAuto-invokedSkill
ai-music-album
Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album experiments and brand soundtracks.
@nexu-ioView Skill