🎯 GSAP Master MCP Server

The most comprehensive GSAP MCP server ever created - Transform Claude into a surgical precision animation expert with AI-powered intent analysis, complete API coverage, and production-ready patterns.

🎉 ALL GSAP PLUGINS NOW 100% FREE thanks to Webflow! Including SplitText, MorphSVG, DrawSVG, and more!

⚡ Quick Start

claude mcp add-json gsap-master '{"command":"npx","args":["bruzethegreat-gsap-master-mcp-server@latest"]}'

That's it! You now have the ultimate GSAP assistant in Claude.

Related MCP server: GSAP-Animation-Generate

🚀 What You Get - 6 Powerful Tools

🧠 1. AI Animation Creator (understand_and_create_animation)

Just describe what you want in natural language:

• "Fade in portfolio cards one by one when scrolling"

• "Create a hero title that reveals character by character"

• "Build smooth hover effects for navigation"

Features:

• 🎯 Advanced intent analysis

• ⚙️ Framework-specific code (React, Vue, Vanilla)

• 📱 Mobile-optimized by default

• ⚡ 60fps performance guaranteed

📚 2. GSAP API Expert (get_gsap_api_expert)

Complete documentation for every GSAP feature:

• Core methods (gsap.to, timeline, etc.)

• All plugins (ScrollTrigger, SplitText, DrawSVG, MorphSVG, Draggable)

• Performance tips and best practices

• Advanced examples and use cases

🛠️ 3. Complete Setup Generator (generate_complete_setup)

One-command environment setup:

• React, Next.js, Vue, Nuxt, Svelte, Vanilla

• All plugins and dependencies

• Performance configurations

• Starter code and patterns

🔧 4. Expert Debugger (debug_animation_issue)

AI-powered troubleshooting:

• Performance issues (lag, stuttering)

• Mobile compatibility problems

• ScrollTrigger positioning issues

• Timeline sequencing problems

• Plugin registration errors

⚡ 5. Performance Optimizer (optimize_for_performance)

Transform any animation for maximum smoothness:

• 60fps desktop optimization

• Mobile-smooth variants

• Battery-efficient versions

• Memory leak prevention

🎨 6. Production Patterns (create_production_pattern)

Battle-tested animation systems:

• Hero sections with layered animations

• Complete scroll systems

• Advanced text effects

• Interactive UI components

• Loading sequences

• Page transitions

💡 Example Usage

Create Scroll Animation

Use the understand_and_create_animation tool to create a smooth parallax hero section with staggered text reveals

Debug Performance Issues

Use the debug_animation_issue tool with: "My animations are laggy on mobile Safari"

Generate Complete Setup

Use the generate_complete_setup tool for React with ScrollTrigger and SplitText plugins

🎯 Perfect For

• Frontend Developers - Professional animation implementation

• Designers - Bring designs to life with code

• Agencies - Rapid prototyping and client work

• Students - Learn GSAP best practices

• Teams - Consistent animation patterns

🌟 Why This MCP Server?

🧠 AI-Powered Intelligence

• Understands natural language requests

• Analyzes intent and generates perfect code

• Explains techniques and best practices

⚡ Performance-First

• Every animation optimized for 60fps

• Mobile-responsive by default

• Memory leak prevention

• GPU acceleration techniques

🎯 Production-Ready

• Battle-tested patterns

• Industry-specific customizations

• Complete error handling

• Professional code structure

📚 Comprehensive Coverage

• Every GSAP method and plugin

• All animation properties

• Advanced techniques

• Framework integrations

🎨 Animation Types Supported

• Scroll-Based - Parallax, reveals, pins, progress bars

• Text Effects - Character reveals, typewriter, morphing

• Interactive - Hover, click, drag, touch gestures

• SVG Animations - Path drawing, shape morphing, motion paths

• Complex Sequences - Choreographed timelines, scene transitions

• Data Visualization - Charts, counters, progress indicators

🚀 What Makes It Special

1. Natural Language Processing - Just describe what you want

2. Framework Agnostic - Works with any JavaScript framework

3. Mobile-First - Optimized for all devices

4. Educational - Learn while you build

5. Community-Driven - Built for developers, by developers

📦 Requirements

• Claude Desktop with MCP support

• Node.js 18+ (automatically handled by npx)

• No additional setup required!

🎯 Installation Methods

Option 1: One-Line Install (Recommended)

claude mcp add-json gsap-master '{"command":"npx","args":["bruzethegreat-gsap-master-mcp-server@latest"]}'

Option 2: Specific Version

claude mcp add-json gsap-master '{"command":"npx","args":["bruzethegreat-gsap-master-mcp-server@2.1.0"]}'

Option 3: Manual Configuration

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "gsap-master": {
      "command": "npx",
      "args": ["bruzethegreat-gsap-master-mcp-server@latest"]
    }
  }
}

🎪 Live Examples

Try these commands after installation:

Hero Section Animation

Create a hero section with parallax background, staggered text reveals, and floating CTA button

Portfolio Grid

Build a portfolio grid that reveals cards one by one with hover effects when scrolling into view

Text Animation

Create a typewriter effect that reveals text character by character with a blinking cursor

🤝 Contributing

Found a bug? Have a feature request?

• 🐛 Issues: GitHub Issues

• 💡 Features: Share your ideas and use cases

• 🔧 Pull Requests: Contributions welcome!

📈 Stats

• 6 Professional Tools for complete GSAP mastery

• 100+ Animation Patterns built-in

• 60fps Performance guaranteed

• All Frameworks supported

• 100% Free - including all premium plugins!

🏆 Created By

@bruzethegreat - Passionate about creating tools that empower developers to build amazing animations with ease.

📜 License

MIT License - Use it anywhere, anytime, for any project!

Transform Claude into your personal GSAP animation expert today! 🎯⚡