gsap-master

The GSAP Master MCP Server provides a suite of AI-assisted tools to help you design, implement, and optimize GSAP animations across frameworks. It includes six core tools: an AI Animation Creator that translates natural language descriptions into framework-specific animation code (React, Vue, or Vanilla) with 60fps performance guarantees; a GSAP API Expert that offers comprehensive documentation for GSAP core methods and plugins (including ScrollTrigger, SplitText, DrawSVG, MorphSVG, and Draggable) along with performance tips and advanced examples; a Complete Setup Generator that produces ready-to-run starter configurations for popular ecosystems (React, Next.js, Vue, Nuxt, Svelte, Vanilla) with plugins and performance settings; an Expert Debugger for AI-driven troubleshooting of animation issues (lag, mobile compatibility, ScrollTrigger positioning, timeline sequencing, plugin registration); a Performance Optimizer to adapt animations for maximum smoothness on desktop and mobile while reducing battery usage and memory leaks; and Production Patterns that deliver battle-tested animation systems for hero sections, scroll systems, text effects, interactive UI components, loading sequences, and page transitions. To use, install the MCP server via Claude using the quick-start example, then invoke the tools by describing your desired animation or problem. For example, request “Create a scroll-triggered hero with staggered text reveals” to generate code, or ask the AG to debug a laggy mobile animation. You can also generate a full setup for React with ScrollTrigger and SplitText and copy the starter code into your project. Commands and tool invocations are designed to be text-based, so you simply describe the goal and the MCP server returns ready-to-use configurations or code snippets tailored to your framework of choice.

Prerequisites:

• Claude Desktop with MCP support
• Node.js 18+ (npx handles installation automatically)
• Internet connection to download the MCP server package

Setup options:

1. One-line install (recommended):

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

2. Specific version (optional):

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

3. Manual configuration (alternative):

Add to your claude_desktop_config.json:

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

After installation, you can invoke the server by using Claude’s MCP tooling to call the gsap-master server and start generating code and debugging assistance for GSAP animations.

Notes and tips:

• The MCP server relies on npx to fetch the latest package. Ensure you have an active internet connection when first running the command.
• The server outputs are framework-specific. If you need React code, ask for a React-ready snippet; for Vue or Vanilla, request the appropriate variant.
• If you encounter any plugin-related issues (e.g., SplitText or DrawSVG), confirm you’re targeting the correct plugin API version supported by GSAP in your project.
• You can re-run the one-line install command to fetch the latest updates of the gsap-master-mcp-server.
• Ensure your environment supports 60fps performance targets; optimize by using mobile variants when testing on mobile devices.
• The MCP server is described as fully free and production-ready, with extensive coverage of GSAP methods and plugins.
• For configuration consistency, prefer the one-line install approach and avoid mixing multiple MCP server entries in claude_desktop_config.json unless necessary.