Gsap Master

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

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":["[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! 🎯⚡

npm version Downloads