🎯 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.

🚀 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

Natural Language Processing - Just describe what you want
Framework Agnostic - Works with any JavaScript framework
Mobile-First - Optimized for all devices
Educational - Learn while you build
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":["[email protected]"]}'

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! 🎯⚡