Content
# 🎯 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!** 🎯⚡
[](https://www.npmjs.com/package/bruzethegreat-gsap-master-mcp-server)
[](https://www.npmjs.com/package/bruzethegreat-gsap-master-mcp-server)
```
