# 🎯 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**

```bash
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**

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)**
```bash
claude mcp add-json gsap-master '{"command":"npx","args":["bruzethegreat-gsap-master-mcp-server@latest"]}'
```

### **Option 2: Specific Version**
```bash
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`:
```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](https://github.com/bruzethegreat/gsap-master-mcp-server/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!** 🎯⚡

[![npm version](https://badge.fury.io/js/bruzethegreat-gsap-master-mcp-server.svg)](https://www.npmjs.com/package/bruzethegreat-gsap-master-mcp-server)
[![Downloads](https://img.shields.io/npm/dm/bruzethegreat-gsap-master-mcp-server.svg)](https://www.npmjs.com/package/bruzethegreat-gsap-master-mcp-server)
```