GSAP Master Skill (Antigravity)

Scope & Ground Rules

You are a production-grade GSAP v3 engineer. You deliver interactive UI motion with:

• Performance (avoid layout thrash, keep 60fps, optimize pointer interactions)
• Maintainability (timeline architecture, modular functions, clear labels)
• Accessibility (prefers-reduced-motion, readable motion, focus visibility)
• Framework safety (React/Next.js cleanup, no duplicated triggers on rerenders)

GSAP Core handles Tween/Timeline + utilities/tools. Plugins add capabilities.

Licensing note: GSAP states the entire library is now free (historically some plugins were Club-only). Never recommend pirated/cracked plugins.

1) Activation Triggers

Auto-activate when the user mentions:

GSAP, Tween, Timeline, easing, stagger, keyframes, modifiers, ScrollTrigger, pin/scrub/snap, ScrollSmoother, ScrollTo, SplitText, ScrambleText, TextPlugin, Flip, Draggable, Inertia, Observer, MotionPath, MorphSVG, DrawSVG, physics, cursor follower, hover micro-interactions, Next.js/React cleanup, SSR, performance/jank, magnetic button, 3D tilt, card stack, swipe cards, add to cart, confetti, loading skeleton, tooltip, context menu, UI interactions, micro-interactions, gesture, pull to refresh, carousel snap, text animation, character animation, word animation, line reveal, typewriter, scramble text, typing effect, text split, staggered text, text mask reveal, gsap core, timeline control, utilities, quickTo, quickSetter, matchMedia, gsap.context, gsap.effects, ticker, GSDevTools, debugging, animation inspector, Physics2D, PhysicsProps, velocity, gravity, acceleration, friction, particles.

2) Output Contract (what you must deliver)

When asked to implement animations, output:

1. Motion plan (goals, triggers, states, durations, easing)
2. Implementation (minimal working code first)
3. Architecture (timeline map, labels, reusable functions/modules)
4. Responsive & a11y (matchMedia + reduced-motion fallback)
5. Performance notes (quickTo/quickSetter, avoid layout thrash, batching)
6. Debug checklist (markers/refresh/cleanup/duplication)

Prefer a "good MVP" first, then enhancements.

3) Plugin Coverage Map (Complete)

Scroll Plugins

UI / Interaction

Text

SVG

Physics / Eases / Tools

Render Libraries

React Integration

4) Core GSAP Mastery (Always-on Fundamentals)

4.1 Primitives

gsap.to(target, { x: 100, duration: 1 });      // animate TO values
gsap.from(target, { opacity: 0 });              // animate FROM values
gsap.fromTo(target, { x: 0 }, { x: 100 });     // explicit from→to
gsap.set(target, { x: 0, opacity: 1 });        // instant set (no animation)

Prefer transform properties (x, y, scale, rotation) over layout props (top, left, width, height).

4.2 Timelines (default for anything non-trivial)

const tl = gsap.timeline({ defaults: { ease: "power3.out", duration: 0.6 } });
tl.from(".hero-title", { y: 30, autoAlpha: 0 })
  .from(".hero-subtitle", { y: 20, autoAlpha: 0 }, "<0.1")
  .from(".hero-cta", { scale: 0.9, autoAlpha: 0 }, "<0.15");

Rules:

• One timeline per "interaction unit" (hero/section/component)
• Use labels + position parameters instead of brittle delays
• Use defaults for consistency, override intentionally

4.3 Position Parameters

tl.to(a, {...})           // appends at end
tl.to(b, {...}, "<")      // starts same time as previous
tl.to(c, {...}, ">")      // starts after previous ends
tl.to(d, {...}, "+=0.3")  // wait 0.3s after last end
tl.to(e, {...}, "label")  // starts at label

4.4 Key Tools

• keyframes: Multi-step animation in single tween
• modifiers: Transform values per-frame (advanced)
• snapping: snap utility for grid alignment
• utils: gsap.utils.mapRange(), clamp(), snap(), toArray()
• matchMedia: Responsive animation orchestration
• context: Scoped cleanup for frameworks

5) Performance Toolkit (Non-negotiable)

5.1 Pointer/mouse interactions

// ❌ BAD: Creates new tween every event
window.addEventListener("pointermove", (e) => {
  gsap.to(".cursor", { x: e.clientX, y: e.clientY });
});

// ✅ GOOD: Reuses quickTo instances
const xTo = gsap.quickTo(".cursor", "x", { duration: 0.2, ease: "power3" });
const yTo = gsap.quickTo(".cursor", "y", { duration: 0.2, ease: "power3" });
window.addEventListener("pointermove", (e) => { xTo(e.clientX); yTo(e.clientY); });

// ✅ GOOD: Ultra-fast direct updates (no tween)
const setX = gsap.quickSetter(".cursor", "x", "px");
const setY = gsap.quickSetter(".cursor", "y", "px");
window.addEventListener("pointermove", (e) => { setX(e.clientX); setY(e.clientY); });

5.2 Avoid layout thrash

// ❌ BAD: Mixed reads and writes
elements.
how to use gsap-master
CursorClaude CodeClineCodexWindsurfGooseGitHub CopilotVS CodeGemini CLIKiloOpencodeKimi CLIRoo ClineAiderContinueZedBolt.newLovablev0Replit AgentSweepSmol DeveloperDevinCavemanAmpAntigravity
How to use gsap-master on Cursor
AI-first code editor with Composer
1
Prerequisites
Before installing skills in Cursor, ensure your development environment meets these requirements:
›Cursor installed and configured on your development machine
›Node.js version 16.0+ with npm package manager (verify with node --version)
›Active project directory or workspace where you want to add gsap-master
2
Execute installation command
Execute the skills CLI command in your project's root directory to begin installation:
$npx skills add https://github.com/su69ar/rdnax-gsap-master --skill gsap-mastercopy
The skills CLI fetches gsap-master from GitHub repository su69ar/rdnax-gsap-master and configures it for Cursor.
3
Select Cursor when prompted
The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ── always included ────
│   • Amp
│   • Antigravity
│   • Cline
│   • Codex
│ ●Cursor(selected)
│   • Cursor
│   • Windsurf
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/gsap-master
Reload or restart Cursor to activate gsap-master. Access the skill through slash commands (e.g., /gsap-master) or your agent's skill management interface.
⚠
Security & Verification Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.
Additional Resources
›View source code on GitHub›Skills CLI documentation›Learn more about Cursor›What are agent skills?